Background audio in Web page - html

I want to use a audio in background of a web page but after a web page changes the audio is restarted. I want it to play continuously whether web page changes or not without any interrupt.

I don't think you can actually do that as I think you want to do it. I assume you load and reproduce the audio in some .js file, which is run on page load by the browser; as you navigate i.e. in your website, the browser re-load all the source files (and also your audio).
I think the best thing you can do is to re-project your page/website as a web-app. Doing that, when you navigate from a page to another you're not actually "leaving" the main page, but you're hiding/showing some html content: in this case, load the audio when the main page is loaded and it will continue to reproduce.
Another, worse, thing you can do is to save the timestamp of the audio track in the current session when you leave the first page, and re-load the audio track from the saved timestamp in the next page. I think this is a worse option as your audio track will be paused till the next page content is loaded (and that could take time in case of connection issues and/or big media files)

Related

Source of YouTube video can't be find on HTML

I just wondering how youtube displays the Video on their web app without the tag?
I also want to implement that kind of technique from my other future web apps.
TL;DR
It's because the video is streamed asynchronously, and not loaded at once. In HTML you will only find a player-container, which is a placeholder for the frames to be fed into it.
A bit more
When you click on a video, the metadata of the video loads first (title, description, etc.), then the stream flows through a socket, depending on the settings you have.
If there were a a fixed source in the HTML for which the video is loaded, changing the settings (playback speed, resolution, etc.) would have resulted in a page refresh!
In addition, YouTube prevents un-permissioned video downloads for a while now, another reason why not to provide a direct source to the video blob.

Download segmented SWF webpage

This has been doing my head in and I cannot for the life of me figure out how to download this SWF webpage.
It starts by loading story.swf then it makes calls to other SWF files as it goes along.
The flash itself is interactive this the need to call different segments a it loads the next 'slide'.
But I cannot figure out a way to download it for offline use. I tried loading the entire document which was 200mb and downloading the cache - no go. I tried to use extensions on chrome, Safari and Firefox - no avail
I really don't want to screen capture the entire file, but I was wondering if there were interactive flash file downloaders. I can see there are over 1000 files but cant download them
As #VC.One said, it is not possible due to the server needing to be present. It was constantly changing the string attached to the swf

Looking for a way that a page load time can decrease for a page that has lots of HTML5 audio

In the instance of a page with a great deal of HTML5 audio, and to maximize the load time efficiency (i.e. - to make it load as fast as possible), couldn't we set a value in the preload parameter to achieve this? Currently, I have preload set to "auto", but I what if we want to not have any page loading ALL of the audio before the page is completely "loaded"? Since in the instance of a user requiring ALL of the audio at any one visit, or even simultaneously is unlikely, how would we achieve that the audio files are only loaded on-demand, and thus achieving maximum load efficiency for the scenario?
Thanks in advance for the insight.
Set the preload attribute to none:
auto
The author thinks that the browser should load the entire audio file when the page loads
metadata
The author thinks that the browser should load only metadata when the page loads
none
The author thinks that the browser should NOT load the audio file when the page loads
Taken from here

Integrate a mp3 player into a page with no reloading issue

Is there any way to integrate an flash mp3 player into a html site where an reload wouldn't stop music playing or make it start from beginning.
I wouldn't want to use ajax for the rest of the site cause it's not SEO friendly, and also pop-ups are not a good solution cause every browser nowdays blocks them.
AJAX can be made SEO friendly as long as you create distinct urls for the pages you are pulling in. One solution I have seen to this is to use a pop up for the player, and they are easily unblocked.
without pop-ups, ajax, or a full flash site, there is no way to prevent this.
You could have a container page that plays the MP3, and contains a 100% wide, 100% high IFRAME that embeds the actual site. However, this has numerous SEO and usability implications that you can look up under the keyword of "frames."
You could use frames. Put the player in a frame of its own and only change the other(s). But I think a reload would still reload all the frames unless you loaded the page then redirected so that clicking the reload button in the browser only reloaded the redirected page.
You're going to jump through some hoops and have to do some things that are not SEO friendly to get this to work. If you get it to work at all.

should embedding video in home page slow down the page?

If I embed a video demonstrating my application in my home page, will it slow down the page to a considerable amount?
I tried, and checked that it takes almost 1 sec, to load the preview of the video.
And as the video stream will not be downloaded until, the video is clicked, the total video do not have to get downloaded.
Is it recommended to embed a video in the home page? Or should I just keep it in a different page and put a link in the home page.
If you are embedding a flash flv video then yes, it could slow the page load down. This is because the page will need to load the flash plugin in order to get the content size, etc and render the initial frame etc.
Doesn't mean it's a bad thing though. It won't be an extreme slowdown (flash is pretty highly optimised nowadays), so instead evaluate on how it looks rather than performance unless you are trying to eke out every dreg of performance on your page load :)
Here one way you can have your cake and eat it too:
Don't put the flash player on the page that you will load by default....
Put in an image that looks like the player instead (it should be much lighter) .
If / when your user clicks on the player image, load in the flash player and play.
Every object you add to a page can slow down the page's loading time. In general don't include anything if the load time isn't worth the added benefit of having that item.
That being said, you can optimize the page by doing some tricks so that the page renders and THEN the flash video loads. You could pre-generate a thumbnail of the flash player/video and put it on the page in the same place as the video, then on page load use javascript (jquery: $(document).ready()) to create the flash object. This may improve the perceived performance. Even better, you could defer loading the video until the user clicks a button or something.
Everything you embed will slow down the page's initial load.
You have several options: (A) embed the video in its native format (mpeg, avi, etc) or (B) convert it into Flash. A good thing about flash is that it's near universal and highly optimized, so loading the flash plugin takes little time.
The whole video needn't load for the page to finish loading (only the player), so if we're just talking about 1 video, it would make sense to embed it in the page so as to provide a better user experience.
Have a look at both of Mr. Shiny and New's points. They're valid as well.