HTML5 audio not loading sometimes - javascript

I have a class AudioClass in javascript to play audio as below: (pseudo code)
var AudioClass = function() {
this.audioElement;
.
.
.
this.load = function(audioSource) {
this.audioElement = //create Audio, set source etc.
this.audioElement.addEventListener("loadedmetadata", function(){
//some code
});
}
this.play = function(from, to) {
if(isNaN(this.audioElement.duration)) { return; } //line 1
this.audioElement.currentTime = from/1000; //line 2 //from & to in milliseconds
setTimeout(function() {
//pause audio.
}, to-from);
}
}
And I am using the Audio as below:
/* the below lines are executed on document load. (playing background music) */
var audioInstance = new AudioClass();
audioInstance.load(audioSrc);
audioInstance.play(20000); //line 3 //20 seconds
/* the below line is used at other places whenever i need sound */
audioInstance.play(40000); //40 seconds
When I am trying to play audio at "line 3", sometimes audio is not loaded by that time, so it is throwing INVALID_STATE_ERR. DOM EXCEPTION 11 at line 2. When I checked the audio duration, it was NaN. So I added "line 1" to check whether the duration isNaN() or not, so that it doesn't try to set currentTime until the audio is loaded.
The problem here is sometimes the duration of audio is always NaN. How to fix this?

You have to create a callback to play the audio when it loads. it works whenever you call audio.play in other places because the audio is loaded by then. Here is how i suggest you do it:
var Audio = function() {
this.audioElement;
.
.
.
this.load = function(audioSource,callback) {
this.audioElement = //create Audio, set source etc.
this.audioElement.addEventListener("loadedmetadata", function(){
//some code
if(callback!=null)
callback();
});
}
this.play = function(from, to) {
if(isNaN(this.audioElement.duration)) { return; } //line 1
this.audioElement.currentTime = from/1000; //line 2 //from & to in milliseconds
setTimeout(function() {
//pause audio.
}, to-from);
}
}
then use it like this:
var audio = new Audio();
audio.load(audioSrc,function()
{
audio.play(20000);
});
an answer to a similar question shows how to preload all your audio (in the event you have others) before start using them:
Proper onload for <audio>

Play the sound in a callback registered to the loadeddata or even better, canplaythrough event of the audio element. (See javascript audio onload and similar questions.)

Related

AudioContext does not have a pause property?

I have used javascript Audio() before, but now I need to add some reverb effect in the audio and I am using reverb.js which uses the AudioContext api. I have the start property available, but no pause property? How do I pause or stop the audio??
Here is my code:
<script src="http://reverbjs.org/reverb.js"></script>
<script>
// 1) Setup your audio context (once) and extend with Reverb.js.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
reverbjs.extend(audioContext);
// 2) Load the impulse response; upon load, connect it to the audio output.
var reverbUrl = "http://reverbjs.org/Library/SaintLawrenceChurchMolenbeekWersbeekBelgium.m4a";
var reverbNode = audioContext.createReverbFromUrl(reverbUrl, function() {
reverbNode.connect(audioContext.destination);
});
// 3) Load a test sound; upon load, connect it to the reverb node.
var sourceUrl = "./sample.mp3";
var sourceNode = audioContext.createSourceFromUrl(sourceUrl, function() {
sourceNode.connect(reverbNode);
});
</script>
Play
Stop
Also, I tried using stop(), and it works, but when I fire start() after clicking on stop, the start() doesn't work. Can you you help me out with a solution??
You can use the suspend() and resume() methods of AudioContext to pause and resume your audio: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend
One way to implement this with a single button for play/pause/resume, would be to add a function that controls the player state. For example:
let started = false;
function pauseOrResume() {
if (!started) {
sourceNode.start();
started = true;
document.getElementById("pauseButton").innerHTML = 'Pause';
} else if (audioContext.state === 'running') {
audioContext.suspend().then(function () {
document.getElementById("pauseButton").innerHTML = 'Resume';
});
} else if (audioContext.state === 'suspended') {
audioContext.resume().then(function () {
document.getElementById("pauseButton").innerHTML = 'Pause';
});
}
}
And replace your existing "Play" button with:
<a id="pauseButton" href="javascript:pauseOrResume()">Play</a>
This does the following:
If the audio hasn't yet been started, the link will say "Play".
If the user clicks "Play", the audio will start playing and the text of the link will change to "Pause".
If the user clicks "Pause" while the audio is playing, it will be paused, and the text of the link will change to "Resume".

safari ios audio- refusing to play with error

The javascript error is: Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
My setup works across other browsers, desktop and mobile.
The way it works is:
have a flag first_audio_played = false;
add a touch event listener that plays some audio, and sets first_audio_played = true; (then removes the touch listener)
all subsequent audio checks if(first_audio_played) some_other_audio.play();
this way, only the first audio played requires direct user input. after that, all audio is free to be triggered by in-game events, timing, etc...
this appears to be the "rule" for audio across most browsers. is the iOS "rule" that every audio needs to be triggered by user input? or is there some other step I'm missing?
For my javascript game, sounds stopped working on iOS recently. They all have readyState=4, but only the sound I played on tap works, the others won't play. Maybe you could play all the sounds on the first tap. But the solution I found that works for now for me is to load all the sounds from ajax arraybuffers and use decodeAudioData(). Then once you've played 1 sound from user tap (on not the body), they all play whenever.
Here is my working code where the second way of doing it is on bottom. When I tap to play sound2, sound1 starts working also.
<html>
<body>
<div id=all style='font-size:160%;background:#DDD' onclick="log('clicked');playSound(myAudio)">
Sound1 should be playing every couple seconds.
<br />Tap here to play sound1.
</div>
<div id=debug style='font-size:120%;' onclick="playSound(myAudio2)">
Tap here to play the sound2.
</div>
<script>
var url = "http://curtastic.com/drum.wav"
var url2 = "http://curtastic.com/gold.wav"
var myAudio, myAudio2
if(0)
{
var playSound = function(sound)
{
log("playSound() readyState="+sound.readyState)
log("gold readyState="+myAudio2.readyState)
sound.play()
}
var loadSound = function(url, callback)
{
var audio = new Audio(url)
audio.addEventListener('canplaythrough', function()
{
log('canplaythrough');
if(callback)
callback()
}, false)
audio.load()
if(audio.readyState > 3)
{
log('audio.readyState > 3');
if(callback)
callback()
}
return audio
}
myAudio = loadSound(url, startInterval)
myAudio2 = loadSound(url2)
}
else
{
var playSound = function(sound)
{
log("playSound()")
var source = audioContext.createBufferSource()
if(source)
{
source.buffer = sound
if(!source.start)
source.start = source.noteOn
if(source.start)
{
var gain = audioContext.createGain()
source.connect(gain)
gain.connect(audioContext.destination)
source.start()
}
}
}
var loadSound = function(url, callback)
{
log("start loading sound "+url)
var ajax = new XMLHttpRequest()
ajax.open("GET", url, true)
ajax.responseType = "arraybuffer"
ajax.onload = function()
{
audioContext.decodeAudioData(
ajax.response,
function(buffer)
{
log("loaded sound "+url)
log(buffer)
callback(buffer)
},
function(error)
{
log(error)
}
)
}
ajax.send()
}
var AudioContext = window.AudioContext || window.webkitAudioContext
var audioContext = new AudioContext()
loadSound(url, function(r) {myAudio = r; startInterval()})
loadSound(url2, function(r) {myAudio2 = r})
}
function startInterval()
{
log("startInterval()")
setInterval(function()
{
playSound(myAudio)
}, 2000)
}
function log(m)
{
console.log(m)
debug.innerHTML += m+"<br />"
}
</script>
</body>
</html>
You can use either [WKWebViewConfiguration setMediaTypesRequiringUserActionForPlayback:WKAudiovisualMediaTypeNone] or [UIWebView setMediaPlaybackRequiresUserAction:NO] depending on your WebView class (or Swift equivalent).

Fire function when HTML5 video seeks/plays

I am trying to stream video using links that expire every 2 minutes.
Basically, I use this function to replace the URL, and it works great:
function test(){
var videoFile = 'new.mp4';
var $video = $('#m video');
var curtime = $video[0].currentTime;
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].currentTime = (curtime);
$video[0].play();
}
The question I have is how do I fire this function every time the video starts playing/after someone seeks in it? If i fire the ok(); function using a play event then it starts a loop since the function itself causes a play event.
Does anyone have any ideas on how to fix this in a good way?
The solution would be to register the play event once the video has actually started playing. That way it will react after a pause or a seek.
If you need to disable the event on other conditions then you simply disable the play event (as done in the start of the playing function)...
function test(){
var videoFile = 'trailer.mp4';
var $video = $('#video');
var curtime = $video[0].currentTime;
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].currentTime = (curtime);
$video[0].play();
$video.on('playing', function () {
$video.off('play') // remove existing Play event if there is one
console.log("Play event bound")
$video.on('play', function () {
console.log("Video play. Current time of videoplay: " + $video[0].currentTime );
});
});
}

How can I make an audio sound play only once using JQuery?

So I have a div that plays an mp3 sound when it is clicked. Instead of playin once. It continues to play over and over again. The snippet of code is:
$(".g-contain").click(function() {
audioElement.play();
});
This may be irrelevant but I figure I should show you the overall code:
/* set no cache */
$.ajaxSetup({ cache: false });
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'https://www.dropbox.com/s/k8xaglyd48vbnq1/pacman_chomp.mp3?dl=1');
audioElement.addEventListener('ended', function() {
this.play();
}, false);
$.getJSON("scripts/data", function(data) {
var html = [];
/* loop through array */
$.each(data, function(index, g) {
$(".container").append(
"<div class='g-details'><div class='name'>" +
g.name + "</div>);
// And finally my click call is here
$(".g-contain").click(function() {
audioElement.play();
});
Not sure why the mp3 file keeps playing when g-contain div is clicked
It's due to this code:
audioElement.addEventListener('ended', function() {
this.play();
}, false);
You attached an event listener to the audio element to re-play when the playing is ended. So once it's played (with click) it will play infinitely.
From the MDN ended event Reference:
ended
The ended event is fired when playback or streaming has stopped
because the end of the media was reached or because no further data is
available.
Just get rid of this code.

Sound doesn't play the expected amount of times

I'm trying to accomplish playing a sound effect multiple times; first, it is triggered by the press of the button, and then it plays twice more after, in intervals intended to be two seconds after the last.
My current (relevant) HTML:
<!-- AUDIO -->
<audio id="ring_audio" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio>
<audio id="ring_audio2" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio>
<audio id="click_audio" autostart="false" src="http://www.freesound.org/data/previews/192/192273_3509815-lq.mp3"></audio>
<div id="title_screen">
<img src="http://data.whicdn.com/images/66375886/large.gif">
<h1>Untitled.</h1>
<h2>a short adventure game</h2>
<button id="start" type="button" onclick="playClick(); fade_title(); playRing_Delay(); playRing_Stop();">Begin</button>
</div>
And my current javascript:
function playClick() {
var audio = document.getElementById("click_audio");
audio.currentTime = 0.3;
audio.play();
}
function fade_title() {
var titlescreen = document.getElementById("title_screen");
titlescreen.style.display = "none";
}
function playRing_Delay() {
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.play();
}, 5000);
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.play();
}, 7000);
}
function playRing_Stop() {
setTimeout (function playRing() {
var audio = document.getElementById("ring_audio2");
audio.play();
}, 9000);
}
Originally, I attempted to tackle this through use of a for loop and keep it contained just to one function:
function playRing_Delay() {
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
for (i = 0; i < 4; i++) {
if i < 3 { //the first two times
audio.play(); //plays audio as normal
}
else { //the last time it plays
audio.play();
setTimeout(function stopRing() {
audio.pause();
}, 500) //stops audio after half a second
}
}
}, 5000);
}
Which, sadly, did not work, so then I attempted to repeat the first bit three times, simply increasing the number of waiting milliseconds so they'd follow in proper succession; I'm not going to paste it because essentially I just put playRing_Stop()'s contents inside of playRing_Delay()'s.
Additionally, I noticed that when I shifted the final ring's wait period (from 9000ms > 2000ms), it played, followed by the one set to 5000ms (as expected), and the second one (7000ms) didn't.
Could someone provide a solution for this - or at the very least explain to me why it happens?
Note: I purposely left out the early stopping point to the third ring in the other methods after my for loop method failed.
That happens because the #ring_audio file is 3 seconds long, and you are trying to replay it after 2 seconds. So it is still playing when you issue the 2nd play command to it.
You should set its currentTime to 0 if you want to restart it before finishing (or wait the full 3 seconds before re-running play on it)
function playRing_Delay() {
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.play();
}, 5000);
setTimeout(function playRing() {
var audio = document.getElementById("ring_audio");
audio.currentTime = 0;
audio.play();
}, 7000);
}

Categories