I have got an issue using alert() in JavaScript. When message appears, tag stops playing .mp3 file. Is it JavaScript bug or I'm doing something wrong?
alert has nothing to do with your audio stopping. The audio are not running on the same JS thread with your code. Take a look at this demo and the HTML5 specification:
When an audio element is potentially playing, it must have its audio data played synchronised with the current playback position, at the element's effective media volume.
By saying "potentially playing", it means the following:
A media element is said to be potentially playing when its paused attribute is false, the element has not ended playback, playback has not stopped due to errors, the element either has no current media controller or has a current media controller but is not blocked on its media controller, and the element is not a blocked media element.
alert doesn't fit into anywhere in the specification so it should not affect your audio.
So your audio might be stopped by many reasons. It might be that your audio file is broken, or perhaps some of your code isn't functioning as you expected (did you check to see if there is any .pause() method calling from your code?). Without seeing any of your code it is hard to diagnose the problem, but it is sure that alert isn't the one causing the issue.
Related
I am working on a Cordova based app for iOS. I have programmatically added a <video> element to the page and it plays fine. However, if I change the video player's source then I am unable to make the video play again. Using the same code in an Electron app works just fine to swap out video clips on the fly. What can I do to make video source swapping work on iOS?
I vaguely remember in the past that one had to call .load() on the video element in order to reset everything. I am not sure if this is still the case though.
It turns out my issue was that I was changing the source of my captions as well. I was storing a reference to my text track element as a field of my video player element for convenience which worked fine in Electron. For Cordova I guess that stored reference was invalid and caused my function to exit early, thus skipping the part where I called play(). Looking up the text track fresh at time of swapping sources solved the problem.
I'm using the Web Audio API to analyse music played from an HTML <audio> tag using createMediaElementSource(). When I now call play()/pause() on the audio element from js I get a delay of up to a couple of seconds before anything happens. Also, when continuing to play after pausing, the audio stutters for a few secs.
My setup is as simple as it gets: A hidden <audio> created using JavaScript, an AnalyserNode attached to it, the analyser connected to the context's destination and then calling play on the Audio-Element. Before someone says it, no it's not the Analyser, it does the same thing without it.
I also noticed a bit of clipping (maybe due to stuttering?) when playing some mp3 files.
I'm using Apache Cordova, but on the Windows 10 UWP platform, so performance in general shouldn't be the problem.
Any idea why or how to circumnavigate that issue?
Try setting the preload attribute, like so;
<audio preload="auto">...</audio>
on your audio element to allow it to prebuffer a little.
The final device I'll be putting this on is an android TV box, but I'm testing on my galaxy s5. Both are having the same issue.
I'm using Full Screen Browser by Klurige, and I originally had some GIF's at the bottom of the page that I wanted to loop, but they ended up being to clunky and big to run efficiently on the TVbox, so I decided to switch over to html5. I've tried with WEBM and MP4, both are doing the same thing.
I have the autoplay and loop attributes in the html5 video as such:
<video id="zach" loop autoplay class="picture"><source src="P-Zach.webm">Error</video>
Neither works be default in the browser. I just see a gray video icon. I can't even click to start it.
I've tried formatting in different ways and everything mentioned on the broken-links.com blog post people keep pointing to. I've tried javascript .play() options. None do anything.
If I add the controls attribute to the video, I can play the video, so I know the video file works, but it still won't loop.
Any help?
Okay, so it looks like it has something to do with android blocking webview from letting javascript control the html5 video.
That, in combination with the lack of native support for loop or autoplay attributes made me ditch fullscreen browser and switch to the only browser I could find that DID support those - Firefox.
I used an app called Ful!screen (or something like that) to remove the notification bar, loaded firefox with the webpage (with html5 playing and looping perfectly) and scrolled down slightly to hide the top bar.
Tada! Fullscreen browser with html5 video instead of GIFs.
Solved my own issue another way.
So I have this audio tag:
<audio src=".....mp3" autoplay id="aud"></audio>
And 20 seconds later I fire this code:
var obj=$('#aud')
obj[0].volume=0;
obj[0].pause();
obj.prop('volume',0);
obj.trigger('pause');
obj.attr('src','');
obj.remove();
console.log('REMOVED!!');
But after all of this, the audio is still playing??
The audio tag has been successfully removed by obj.remove(), but the audio goes on.
The console.log() logs correctly. I get no errors. But despite using several methods to mute, pause and remove the audio tag, the audio goes on.
Can anyone explain why?
I need to purge this audio with salt and flame. Any help will be most appreciated, this is slowly sending me insane...
So I fiddled with this when writing this as an answer and I conclude the following:
Manually creating the audio tag with autoplay property causes it to play even before being added to the DOM tree 2 times(on older jquery implementations). Even after adding that element to the DOM tree, it will be usually impossible to stop both audio streams - prolly one of the streams gets disconnected from the element when second stream is played. Did not dig into that too deeply. I reproduced the issue here:
http://jsfiddle.net/2gaBs/3/
When you click Create w/o autoplay button you can pause it properly, but when you click Create autoplay it will start immedietally (even before adding to the DOM tree) 2 times! You probably didn't notice the 2nd playback(neither did I) because when mp3 is on the same machine 2 audio streams are almost perfectly in sync. Pressing Try stop will stop one of the audio streams (you need to wait 5 seconds, note the setTimeout).
Also note that if you switch to jQuery ver to 1.8.3 or above this issue no longer occurs, so it seems that both of us were working on old jQuery libs that day^^
So 2 solutions are: update jquery version to 1.8.3 or above, or create the element without autoplay property and start it later.
I have a problem with the .load(); function on my ipad.
$(this).bind('ended',function() {
$('video').load();
});
It's a simply function for loading the same content after the Video ends.
Any idea why this function does not work on an iPad?
The .load() method loads the video into the tag. The .play() method starts the currently loaded video. One more thing to keep in mind is this, is the video the right format? The tag can load quite a few formats but not every browser can handle every format. iOS browser like iPad/iPhone and even Safari on OSX/Windows can play m3u8 playlists encoded with h264/AAC and mp4 encoded with h264/AAC files but will not play webm, vp8 or avi. So you need to keep all of this in mind when building this type of tag. You might want to look into just building the the player with straight Javascript and supplying multiple tags and then let the browser determine the video it can play. (I did this at a past job and it is a lot easier than you might think) And I believe that with certain browsers you need to reset the 'play pointer' and tell it to start at position 0
jsfiddle [dot] net/nexxuz/XuLCC/15/
(will not let be post link without code)
And I was able to get this working playing multiple videos too (once one ended played another) (Ad video plus content video) also I was able to get a mid roll video working too. (at x seconds into video play another video and then once that video is done resume the first video)