I'm trying to find a way to make a visualiser in javascript so I need to be able to get the audio output level from a youtube video and turn it into some sortof percentage or number. If anybody could help that would be great.
Note: this will only work with the HTML5 player.
You can create an AudioContext object:
context = new AudioContext()
and connect it to the YouTube video element:
src = context.createMediaElementSource($('#movie_player video'))
You can then use a ScriptProcessor to process the playing audio in real-time. The example on the Mozilla documentation page seems to provide a good base you can build on.
Related
I'm trying to play MediaStream from remote peer (WebRTC) using Web Audio API. When i attach the stream to audio element using audio.srcObject = stream it plays ok, but when i try to use AudioContext it does not play any sound at all (I need to avoid audio/video HTML tag).
This piece works:
<audio controls>
<script>
const audioEl = document.getElementsByTagName('audio')[0];
audioEl.srcObject = MY_STREAM;
audioEl.play();
</script>
This one does not:
const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(MY_STREAM);
sourceNode.connect(audioContext.destination);
// Trying even 'audioContext.resume()' after user gesture with no luck
What is weird about that is that when MY_STREAM is my micriphone then it plays nicely for Web Audio API (i hear the feedback from my mic).
So it would suggest that there is something different between microphone MediaStream and the one i get from WebRTC connection but why DOES it play for simple HTML audio tag?
As demonstrated by #jib, this is a Chrome bug.
I have opened a new issue to let them know about it.
I thought I found a workaround by simply assigning this MediaStream to the srcObject of a dummy HTMLAudioElement,
new Audio().srcObject = mediaStream;
but somehow, while testing on my localhost it didn't persist in time, while in this fiddle it does.
I also encountered a lot of other weird behavior while playing around, like different tabs having incidence on others and things like that.
Add to that other non-fixed bugs in the area that make me think of false positives and all-in-all, I fear there is no proper solution than waiting for them to fix it...
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 want to know how they did this:
http://al-quran.info/#1:1
When you play a verse, the second verse will play after it. It also highlights the text that is "playing". Is there an example I can work with or anything?
So what I want is to click on play at verse A and it automatically plays, highlights and scrolls B,C etc. after that.
How do I do this? I know this is done with Jplayer but I don't know much.
Thank you in advance.
Most of the HTML5 audio players are using HTML5 audio elements. From the javascript point of view you can access bunch of useful methods and properties defined in HTMLMediaElement Interface
just to give you a picture here is some example code with naive algorithm:
var audioElement;
audioElement = document.getElementById('audioElementID');
while(isPlaying()){
if(audioElement.ended){ //Indicates whether the media element has ended playback.
playAndHighlightNext();
}
}
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.
Is there any way to control YouTube EMBED CODE. For example I am using YouTube embed code in my site. Is there any way to control the video like forward, backward, stop etc. with my own buttons.
Is this possible?
Any help will be appreciated.. Thanks in Advance.
Fero
YouTube has a JavaScript and Flash API that you can use to build your own player or control the player programmatically.
The documentation is here: http://code.google.com/apis/youtube/overview.html
There are several examples in the documentation for controlling your own "chromeless" player. This is probably what you want to use if you want your own buttons.
All of the major browser-embedded video player types have ways to do this, but the method is different for all of them.
YouTube uses a Flash player, which poses a special problem: Flash video players have no ability to handle external JavaScript calls other than what is specifically added by the programmer that built the player. That is, if YouTube didn't build their player with support for external scriptability, you can't script it. This isn't a flag -- on/off -- it's that Flash makes you explicitly publish an external scripting API, and you have to know what the calls look like to make the player do what you want. This is unlike, say, QuickTime, Windows Media Player, or the new HTML 5 <video> tag, all of which have documented basic playback control like you're asking about.
It's probably possible to build your own FLV player (or buy one, like the popular JW Player, which does have a JavaScript API) and point it at the actual video file served by YouTube. I don't know if they try to obscure the video file URL, but once you find out what it is, you're golden.