I was wondering if there was any Javascript method that could help getting information on the state of an audio tag:
is the audio playing
has it stopped
is it muted
is it paused
and the sort. I know that we can use play(), pause() and others but not quite sure on how to check in the script that the audio is playing in order to trigger another event/action maybe ?
Yes you can check a number of attributes on the HTML5 media elements, a list of which you can find in the W3C HTML5 Specification itself.
Under the "playback state" list you can see such attributes as paused, muted, ended etc.
Related
I'm curious how Youtube allows you to control the speaker volume through embedded controls in their website? Can Javascript control the speaker output? Thanks in advance.
Ok, so yes, for <video> and <audio> elements JavaScript can control the volume of "playback".
That does not mean JavaScript in the browser is controlling your speakers, directly, it is more like your browser can send audio to your systems speakers... And your browser let's JavaScript signal certain intents, which are forwarded by your browser to the system and then to the speakers.
But if your speakers are set to a low volume, or are off, your JavaScript could not change that.
You can learn about the details on MDN here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video and here https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
You can assign the volume property of the audio or video element to set the output volume.
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.
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.
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 am using Brightcove custom player, it has only videoDisplay ( not video control ). In JavaScript i am creating all media control like ( play/ pause, Seek bar, volume , fullscreen).
I am able to play, pause, seek video via smartplayer API. But i didn't find a method to mute / unMute or adjusting volume.
From Brightcove support website i found a article to control volume via JS
http://support.brightcove.com/en/video-cloud/solutions/controlling-volume-player-api
setVolume method throws undefined error
But i don't find a method video.setVolume() in VideoPlayer API
http://docs.brightcove.com/en/video-cloud/smart-player-api/reference/symbols/brightcove.api.modules.VideoPlayerModule.html
Help me controlling volume via JavaScript
Thanks
I'm trying to figure this out to - I need a video to auto-play (its going to be used in an ad unit) and have it be muted by default.
From the link you provided, see the following note:
Note: Volume control has not been included in the Smart Player API.
iOS devices do not allow for control of the volume outside the
built-in system controls (i.e. cannot be done via Javascript).
Controlling the volume programmatically in any HTML player is
currently not possible.
I'm thinking the solution might be to use the Flash Player API where it is supported with auto play and mute, and then fall back to the Smart Player API without auto-play everywhere else.
I'm also looking into video.js as an alternative - but if the note from the BC knowledge base is correct, thats not going to work.