createMediaElementSource() performance - javascript

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.

Related

Applying effects to MediaStream in audio tag streaming Shoutcast

I've got a project I've been working on that broke due to an update in Chrome and I've tried everything I can think of to fix it, but I think my underlying implementation is the problem.
In my project, I'm setting the src of an HTML5 audio tag to a Shoutcast link. I then capture the media stream, call createMediaStreamSource with it, then apply filter that I want to the audio (low pass filter, etc.). In Firefox, I can then call play directly on the new stream source and it plays with the given effects. In Chrome, however, since the audio element is not playing, calling play on the stream source does nothing. But if I play the audio element, Chrome plays both the audio element and the stream source. In older versions of chrome, I could just mute the audio element and the stream would continue playing, but in newer versions, this doesn't work.
Is there some better way to be doing this? I just want to play the stream source with new effects. Maybe some way of modifying the stream source with the effects, then setting that back to the audio tag? A different way of playing the streaming audio?
For additional context, I'm using a library called Pizzicato to do this. Code looks roughly like this:
audioElement.oncanplaythrough = () => {
audioElement.oncanplaythrough = null;
let capturedStream;
if (options.audioElement.mozCaptureStream) {
capturedStream = context.createMediaStreamSource(options.audioElement.mozCaptureStream());
} else {
capturedStream = context.createMediaStreamSource(options.audioElement.captureStream());
}
applyEffects(capturedStream , soundEffects); // connects effect AudioNodes together
audioStream.play();
};

Cannot play HTML5 video in Cordova app on iOS if the video src changes

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.

How to play audio on a PHP/HTML/Javascript based game on facebook?

Is there any way how to play audio for the game slot machine when the reels spinning using javascript.
I tried using , and tags.. The music is playing but on some of the versions there is no sync..
The process is:
- Once the spin button is pressed.. I am showing the animated reels images and embeding the music file with tags.
May be is there any better solution to load music file before and play using .play() function in javascript. I tried this but not working on someversions of firefox and other browsers.
One solution some use is multiple instances of jPlayer (one per channel). You can then preload the sounds and .play() them at will.
jPlayer will try to do HTML5 and use Flash as a backup solution.
http://jplayer.org/

flash-free continuous audio player - is this possible?

edit: condensed question:
How can I create a flash-free continuous music player (one that is uninterrupted as the user navigates the site)
So I want to set up a website with an audio player that behaves in much the same way as that of many flash players on sites such as hypem.com and pitchfork.com, however I want to avoid Flash altogether if possible so I can retain compatibility with Apple mobile devices.
(edit: mind you i am not creating something mobile-specific! just a webpage with an audio-player feature that can be used on an Ipad/Iphone/Ipodtouch)
I've been looking everywhere for info and so far some people have thrown around that Javascript might provide a solution, but all the players I've found use Javascript AND Flash and do not address the continuous play issue.
Take a look at the html5 <audio> tag.
http://www.catswhocode.com/blog/mastering-the-html5-audio-property
Try and keep your SO questions specific. Ask your site layout question in another question.
https://stackoverflow.com/faq
Here is some code that should get you on the right track
First the html audio element supported by all the browsers but in the IE family only IE9
<audio id="test" controls="controls" type="audio/ogg">Your browser doesn't support the audio tag.</audio>
Then the javascript
window.onload=function(){
var pre='';
var arr=['songTitle1','songTitle2','songTitle3'];
var ind=0;
var ele=document.getElementById('test');
ele.src=(ind++)+'.ogg';
ele.play();
//when the song ends start a new one
ele.onended=function(){
ele.src=(ind++)+'.ogg';
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ind=ind==arr.length?0:ind;
ele.play();
}
}
This just takes an array of song titles and plays through them assuming that you have the ogg files in the same directory as the html file. Right now I think ogg is the only format that you can play on all browsers.

Is there any way to control EMBED Code Videos?

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.

Categories

Resources