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.
Related
I was making an game from a course project using html, css and javascript, and in this game i need to kill a fly everytime i click on it, so i decided to use an audio for everytime the fly dies to make the game more fun, the rest of the function is ok but my audio is not playing, altough i'm getting the audio source right.
`
fly.addEventListener("click", function(){
this.remove()
points += 10
document.getElementById('hasPoints').innerHTML = points
console.log(sound)
sound.addEventListener("canplaythrough", function(){
sound.play()
})
})
`
i've also already tried to add the sound preload property to auto but it still didn't work
The only solution i could achieve was changing how the sound would function, instead from playing everytime i kill a fly, i made it play for every click on the window, using window.addEventListener
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 have a MP4/H264 video clip which is being captured so that it grows every 4 seconds and its metadata is dynamically refreshed. Since this is not fragmented MP4 I cannot use MediaSource API to manipulate chunks.
I'm looking for a way to update/refresh the duration of the video during playback without the need to reload the whole clip.
In short words I'm looking for a way to do the following in more user-friendly way.
setInterval(function() {
video.src = video.src;
}, 4000);
I'd like to avoid having 2 video tags and switching from one to another with the method above. I have also tried with popcorn.js without any luck.
Using Chrome, and... only chrome so not worried about other browsers.
Any advice would be greatly appreciated!
I am not sure that is possible. As per specs:
If a src attribute of a media element is set or changed, the user agent must invoke the media element's media element load algorithm. (Removing the src attribute does not do this, even if there are source elements present.)
So if you touch the video.src the browser should invoke implicitly video.load(). In your case (setInterval) Chrome does this.
I guess you already went the route of saving the currentTime of the video before changing the src and applying it after the src change (wait for the canplay event in this case and call video.play() to resume playing)? I guess you would have some stuttering for 4 seconds refresh in your case.
It seems that you are trying to emulate a live stream as an on demand feed and I do not know a way to do this with progressive download of mp4 (read with un-fragmented MP4).
Related article.
Thanks
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();
We are developing a Javascript web app for the Ipad that requires sounds to be preloaded before it loads. We don't know what sounds the user needs until they click on an exercise and then they need multiple sounds to be preloaded before the exercise starts.
I am aware there is no preload method, and that the download needs to be bound to a direct tap / click event. We have spent a considerable amount of time trying many combinations of adding media elements dynamically on every click (loaded with dummy sounds) and then trying to swap them with the mp3's we need at the time.
We have given up on that approach and thought we could just join the sounds into one file and move the play head to the desired ranges (contained in a JSON file). We got this working successfully on the desktop but we can't do it on the Ipad because we don't know when the sound is completely downloaded.
Even after the user initiates the sound to be played, the device has no method for checking when the sound is fully downloaded. In fact, it doesn't download the whole file unless it is playing. What we have discovered is that we can not consistently get the duration unless the play head has reached the end in a linear fashion. We have tried to check the buffered.start() and buffered.end() properties against our own duration (we have the JSON file with all the times) but as soon as we try and set audioElement.currentTime and stopTime, it just plays the whole sound from beginning to end.
We have found that the seekable property to be unreliable as well.
We are now working with ios5 and I believe that older versions work differently in regards to the duration property.
Has anyone been able to get this working?