I have this html in index.php:
other
<audio id="music" controls>
<source src="music/music.mp3" type="audio/mpeg">
</audio>
And I need that audio was playing even if I click other.php. But when I click, so I want to play music where it was stopped on index.php.
Some ideas?
The window.onbeforeunload property allows you to register an function that runs when the user leaves the page.
The <audio> element has a currentTime property that tells you how much of the audio file has been played so far. If you set it to a new time, the audio element will skip to that point in the media file (although I think you’ll have to wait until the file has loaded).
You can save data from JavaScript to the user’s browser using cookies and, where supported, HTML5 Local Storage.
So — you could set a window.onbeforeunload handler function on index.php to save the currentTime of your audio element to a cookie or local storage, then set a window.onload handler function on other.php to read the saved currentTime and write it to the audio element there.
There Will Be Bugs. But it should be possible to make it work, give or take.
Related
If I have an html5 audio element with multiple sources, is there a way I can specify which source should be used when the user wants to download the file vs playing it in the browser (or achieve a similar effect with javascript)? For example, if I have two files, test_file.opus and test_file.mp3, can I signal the browser to play the opus file when the user clicks play, but then to download the mp3 file when they right click and select "save audio as". Typically opus audio files can be smaller, but they can't be played very easily unless the user knows what they're doing.
<audio controls preload="metadata">
<source src="test_file.opus" type="audio/ogg; codecs=opus">
<source src="test_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Quick Note: I realize I could provide a download link in an <a> tag next to the html5 audio element. I was just curious if there was a way to signal the browser which one should be downloaded vs played in the browser or if there was a way to achieve a similar effect using javascript.
I have added Audio to a webpage, to play once it loads, which works fine in Internet explorer but not in Google Chrome.
<audio autoplay>
<source src="gears_01.ogg" type="audio/ogg">
<source src="gears.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I then added the following Javascript and gave the audio element the ID audioId. Again this worked perfectly in IE, but still nothing in Chrome, unless I Hit the CTRL and F5 keys together a couple of time and then chrome would play the audio file.
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
I have tried a host of code snipets and suggestions from various forums etc, but i just can't seem to get chrome to autoplay the audio. If i add controls it is fine, it just wont autoplay.
UPDATE:
So i have discovered that if i load the page from a link then the audio plays, but if i just type in the URL of the page, nothing happens.
I'm not sure on the reason why Chrome can be funny with autoplay. I tend not to trust it. This isn't really an answer for your question, but a work around for the problem.
Instead of using the autoplay attribute on the audio control. Use the canplay event on the element.
var audio = document.getElementById("audioId");
audio.oncanplay = function(){
audio.play();
}
audio.load();
When the canplay event is fired, call play() on the audio element to start playing. You're creating your own auto play. Just remember unless you remove the event, any time the audio control loads a new file and can play the audio, the event gets fired. I tend to use this method to give me more flexability pre-playing the audio/video.
Here follows the code snippet am using where TextToSpeech is a servlet which returns audio stream (via ServletOutputStream).
<audio autoplay controls>
<source src="/TextToSpeech?input=Welcome" type="audio/wav" />
Your browser does not support the audio element
</audio>
But Chrome browser is NOT auto-playing the audio. Can any one help me please?
P.S: I did test the audio stream by saving it to a file and it played well. So no issue with audio that returned from the server.
On mobile the audio autoplay function is usually disabled in order to avoid data traffic usage without explicit action from the user.
You could workaround that using javascript, when the page is loaded (i.e. jQuery.onready() ) you can start playing the audio file with something like that:
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
I have a simple HTML5 Audio player on my website like this:
<audio src="file.ogg" preload="none" loop="loop" controls="controls" >
Your browser does not support the audio element.
</audio >
I want that if the file was played to end the file should be reloaded. now if the file is played and I click on play again it plays the file which is in the clients browser cache. but I want if I click play the file should be loaded again from the browser.
You really cant.
What you can do is. that is what I would do at least .embed a js to be triggered when you hit play button(just a play image not the actual file) that should create a new audio tag.
that way it creates a new audio. Audio is super limited.
No way to control buffering, there was a flag at somepoint to disable the buffering they removed it.
If you have, for example, "stopped" the media with:
media.pause();
media.currentTime = 0;
//Just reload
media.load();
That should clear the buffer.
I'm trying to play an audiofile from google translate in an html5 audio element. My code for this is:
<script>
$("#play_button").click(function(){
$("#memory")[0].play();
});
</script>
<audio id="memory" preload="auto" style="display: none; ">
<source src="http://translate.google.com/translate_tts?tl=en&q=hello">
</audio>
which normally would play a voice saying "hello". This works i safari but not in google chrome, where I want it to.
If I "preload" the sound once (loading the url in another tab) and then run this code on my page again, it works. Probably because the audio gets loaded into some cache. (I don't know that much about that...)
Is there anyway to track if the audio is loaded and get the browser to wait for that before trying to play the sound. Or is the solution to download the file to the server and then reference my audio by the new file?
The browser interprets html in the same order as it appears in the html file. If you move your script tag below your audio tag, it should load the audio before running the script.