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.
Related
1 -If I add one video with <video> tag at the top of my page but autoplay is turned off, will it affect page load time by loading all of the video first?
2- If a user wishes to see the video(of say, 20 min) from where he has left(say, 10 min), will the whole video be downloaded?
Thanks.
videos are typically not completely downloaded. You can control this with the preload attribute.
preload= "metadata" - is the default which is 2-3% of the video.
preload="none" - no video will be downloaded on page load
preload="auto" - the entire video is downloaded. (Some browsers do not do this, and only download partial videos anyway)
If you zoom ahead from 10 min to watch 10-20min, with a mp4, you probably will download 0-10. Video streaming (like HLS or DASH) can skip ahead and not download 0-10.
I have a .wav file that is being continuously appended to. Is it possible to play this file using the HTML <audio> element? Here is my current approach:
<audio controls="controls" autoplay="autoplay" preload>
<source src="stream.wav/" type="audio/wav">
</audio>
If I refresh the page, it reflects the new audio available in the file, but it does not render as a streaming player. It seems like it should be playing in "live" mode according to this question.
I would also be open to using some kind of framework or JavaScript to accomplish this if that would be best practice, but I haven't found anything yet.
Files cant end in /
src="stream.wav/"
Should be src="stream.wav"
In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Server-side_Streaming_Technologies
That section of that page lists a few popular options for doing this.
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 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.
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.