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.
Related
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();
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 have a single page website on which I would like to host up to 14 videos using the html5 video player. The video files are all between 80 and 150mbs and I'm currently hosting them on AWS S3.
I'm running into a problem, however, which is that the players do not load well. Once I click play, they take often 10 seconds to start playing. Because of this, I tried turning on the preload function (i.e. preload="auto"), but this led to other problems. Because there are so many players on the page, some of the players stall -- I think because when a browser tries to download too many at once, some will stall.
In order to mitigate that problem, I setup a queue to preload the videos three at a time. That works, but now I've run into another problem: Chrome, at least, stalls giving a message "waiting for available socket...." I know from this that that is probably due to a limit on the maximum six websockets that can be open at once.
So now I'm truly stumped. I'm not sure how to guarantee that the videos start playing in a reasonable time (1-3 seconds) after the user hits play, and not max out the browser's limits. I'm starting to wonder if this just can't be accomplished given the limits of the html5 video player.
If anyone has any ideas about workaround, or ways in which approach could be altered it would be much appreciated.
So instead of turning preloading on, I would suggest you set preload to none
e.g:
<video id="myVideo" preload="none">
Think of it this way - if you set 14 fairly large videos to all download at once, so they are available immediately for the user wants them, you'll end up with no one video actually fully loaded.
If you set them to not download at all until the user requests one (i.e. clicks the play button) then there may still be a small delay. However they'll end up downloading less overall, they'll only download the videos they actually watch and the page is much less likely to crash. This is much more considerate to the user too (think those on low bandwidth/throttled connections).
However, not all browsers respect the preload="none" option and may preload parts of the video anyway. The safest possible, but more complicated way would be to put placeholder images with fake play buttons on them, which on user click dynamically inserts a video tag to the DOM. That way you can be sure no video tag is ever loaded until it is requested.
I'm working with HTML5, making an audio player.
I wonder to know how I can add a buffer bar so that the user can see how long the song is loaded.
I've tried using several properties that I saw in some tutorials, but none have worked, and I can not find anything about this specific topic.
This is the audio player that I'm trying to edit.
I wish someone could guide me on how to edit the code to do it, or, otherwise, recommend tutorials, documentation or any information.
There's no guarantee that all of this is going to work on all browsers...
...however, assume, for the rest of this post that:
var audio = new Audio();
audio.src = "//example.com/some-really-long-song.mp3";
"canplay" is the first useful event, in terms of being able to play the song.
It means that part of the song is ready to go, and it's at least enough to be able to hear something, if you hit the play button.
Alternatively "canplaythrough" is the browser's guess at whether you can start playing the song right now, and it will run without stopping (based on amount of data left to download, and how fast the song is currently downloading).
audio.addEventListener("canplay", function () { audio.play(); });
"durationchange" is an event which should fire when a duration changes.
For file-types which don't have metadata, or where the metadata isn't supported, the whole duration might not be available as the file starts loading.
In these cases, audio.duration might be updated by the browser downloading the first bit of the media, and then the last, and making an educated guess at the length of the file, or the duration might come from the browser having to load more and more of the file, and increasing the duration as it goes. Where we are in terms of support, I don't know.
audio.addEventListener("durationchange", function () {
player.time.duration.update(audio.duration);
});
"progress" is an event which fires ~250ms as data is coming in (while downloading the file).
progress tells you that updates have been made to data which is available to seek through right now.
This makes it a good event to use to check your audio.buffered objects, in order to update the "loaded" portion of your progress bar.
audio.addEventListener("progress", function () {
player.progressBar.update(audio.buffered.start(0), audio.buffered.end(0));
});
Then you can use "timeupdate" to deal with playback.
timeupdate will update a few times a second, as the song is playing (as audio.currentTime moves forward).
In a simple HTML5/WebGL app, I want to play a sound effect occasionally.
Currently I have in a constructor:
this.audio = new Audio('audio/zeep.mp3');
Then later, I want to play the file:
this.audio.play();
It works the first time, but second plays fail. I've tried resetting the currentTime to zero, and also to 0.1. Neither work:
this.audio.currentTime = 0;
this.audio.play();
If I recreate the Audio object with each time I want to play it, Chrome's network tab shows that it's going across the wire to re-fetch the file, rather than serving it from the cache.
Note that I don't need the same sound effect to play multiple times concurrently. This sound will be infrequent.
Am I missing something here?
audio element Can't play again.
the http header of the audio file need to have Content-Range like:
Content-Range:bytes 0-5151/5152
it's designed for seeking.
and one audio element can NOT be playing concurrently, if need concurrency.use:
var copy = audio.cloneNode();
copy.play();