I have an HTML5 <audio> element that I change the src to every minute with the following code:
$(Audio)[0].src = newBlobURL;
$(Audio)[0].load();
$(Audio)[0].play();
There is a brief stop between the previous audio and the next audio. Both audio files are in wav format and are stored in Blob URLs.
How can I remove the stop between audio files? This problem can be heard more on i-OS safari but it can be reproduced on most browsers.
The delay is likely from loading the new audio file. Try loading all of your audio at once when the page is loaded. Then you can play them one at a time without loading each one in real time.
Run all of the source and load all at once when the page loads.
$(Audio)[0].src = newBlobURL;
$(Audio)[0].load();
Related
I have a list of video tags which I need to play one by one with preset currentTime. When I load the page the readyState of videos get stuck at 1 and the video gives a starting glitch. I have used preload attribute still the video takes time to start playing on every switch. Even if some of the videos have currentTime set and readyState = 4 it takes time to play the video. I looked into xhr createObjectURL blob method but that takes too long for all the videos to get downloaded. For the same reason I did not try MediaSource API.
The media source extension (MSE) does not require you to download the whole video before you play it.
It allows you request a video segment by segment and manipulate the segments any way you want before you set them as the source for the video player.
There is a good overview along with some sample javascript which I think helps to understand the approach here: https://www.html5rocks.com/en/tutorials/eme/basics/
and you can see a simple working example here: https://github.com/bitmovin/mse-demo/blob/master/index.html
The general approach is:
create a MediaSource object
Set the source of the video element in your HTML page to the MediaSource object
Add a listener for the MediaSource being opened (when the video is played)
get the first segment and add a listener to request the next segment
as segments are received append them to the MediaSource buffer
when there are no more segments to be requested stop
In your case you can immediately start to request the next video when you get to the end of the first.
One other thing twitch for - mp4 videos often have their metadata at the end which means you need to download the entire video to start. You can move the metadata to the start using special tools or simply make sure you put it there in the first place if you are doing the transcoding yourself. ffmpeg supports moving the data with the command line option '-movflags faststart', for example.
I made a online audio player. its fine but its taking too many time to start playing the audio on slow internet. Is here can i do anything to fix this problem?
can I set any loading time? like at first the audio will load first 10 second. when the first 10 second loaded the player will start plying. while it play first 10 second in that time the player will load next 10 second.? can I do it?
var audio = new Audio();
audio.src ="dir/music.mp3";
audio.loop = true;
audio.autoplay = true;
it is my current code. Please help me. Thanks
I think your best way will be to have a lower quality .mp3 file (192kbps)?
You're never sure the next 10seconds will be loaded once you've played the first 10seconds.
The Browser decides how much he will preload. You could make this like: Force the Browser to Play audio as soon the HTML is fully loaded.
window.onload = function() {
document.getElementById("my_audio").play();
}
But slow connection is not you only enemy. If the Browser/PC is slow it may take longer because it has to load and decoding the audio. Your best bet is to use audio with lower quality. So it can load and process it faster. If you using HTML5 audio tag, make sure to use preload="auto".
<audio preload="auto">
To make advanced audio stuff you had to use low level audio frameworks and so on to have more control over how the things work.
Also .wav is way faster in decoding than .mp3.
i am using a video on my website. The problem is the video gets downloaded every time it is loaded. For eg. When the video loads for the first time the browser downloads the 5.3 mb of video. Since i am using html 5 video loop and autoplay, it loops and again downloads another 5.3mb of video. This happens every time the video is loaded.
Is there any trick to cache the video for once and used the cached version as long as the video is played.
Answered for anyone else that comes across this question.
Chrome has an option to disable the cache while devtools is open. This is set as default to unchecked, i.e normal behaviour.
If you look at the screenshot in the question, you can see in the size column "(from cache)" that although it looks like Chrome is re-downloading the video each time, it is actually getting it from the cache.
I have created code for playing an .mp3 file using JavaScript. But the file is taking to much time to play on Android. I want to play the sound quickly after click on a text image. How do I increase loading speed on Android?
My JavaScript code:
if(window.audio)
{
audio.pause();
}
window.audio = new Audio (audio_path);
window.audio.play();
Check demo here -
http://97.74.195.122/gizmo-demo/canvasslidertwo.php
In the above link, click on the Japanese word for playing sound.
You are actually facing the bug depicted in this question. Which makes chrome browsers redownload the files from an Audio Element each time you change its src property (no-caching).
One solution would be to use the WebAudioAPIand store your audio files in the buffer. Doing so, you should be able to call them with no latency.
You can check the accepted answer for an example on how to deal with it.
Or you could also try not to call a new Audio() on each click, and rather load every audios from your page and only call their play() method on click.
But I'm not sure it would fix your issue.
I am developing a mobile web app with HTML5 audio. Much has been said here and on other forums about the fact that you cannot do an auto-play on mobile devices and I worked around that by forcing the user to touch the screen just once to start the app, firing a dummy audio load on that touch, then loading and playing audio files automatically using the src parameter. This works very well and is supported even by IOS7.
An example with short audio files is at test audio. View source to see the rather simple code.
In the actual app, I want to follow this logic but I need to ensure that each audio file is completely loaded before playing it. My question is, is the preload directive issued once when the main audio object is created and thus, applies to all files that are subsequently loaded, or do I have to issue it once for every file loaded. And if the latter, is it before or after the src directive?
myaudio = new Audio();
myaudio.preload='auto';
myaudio.play();
myaudio.pause();
or
myaudio.preload='auto';
myaudio.src = "/js/crow.mp3";
myaudio.play();
or
myaudio.src = "/js/crow.mp3";
myaudio.preload='auto';
myaudio.play();
Thanks for any insight you may lend.