I want to program a little browser game which needs some audio.
<audio id='my-audio' src='...'></audio>
That works on desktop and mobile but I have one problem: I can control this audio with the system audio controls. So when I press pause/play on my computer keyboard it affects this audio and on my phone's lock screen there appears a huge audio control widget. Is it possible to disable/remove these controls?
I also tried using
new Audio('...')
in Javascript instead of the audio-tag. That did not solve the problem.
I suggest using the Web Audio API. The link is to an example that I think covers a use case similar to what you requested. In addition to running the tutorial, I've also successfully used this API to read raw audio data (PCM array of float values) and play back on demand, which is a bit more involved than what you are asking. In either case, there was no issue with popups of any sort.
Related
So I am using video.js as my video player on my website, but was curious if there was a way (either using video.js or another video player) to be able to sync a video between all devices on the website?
For example, if Person A, Person B and Person C is viewing this video on my website, it would sync their video up so they are at the same time, and if either of them pauses then all three people see their video pause? A lot like Netflix Party / Youtube Party for videos. I am quite new to JS
It's possible to set and read the current time of a video in JavaScript with HTMLMediaElement.currentTime. You can also play/pause and check if its playing with either the paused attribute or the pause/play events.
You will need some form of backend to keep track of when all of this happens and to relay the appropriate time/events to everyone watching which is outside the scope of basic DOM JS (though there are JS based backends if that's your thing).
You'll probably need some form of live two-way connection like a websocket.
So I am using video.js as my video player on my website, but was curious if there was a way (either using video.js or another video player) to be able to sync a video between all devices on the website?
For example, if Person A, Person B and Person C is viewing this video on my website, it would sync their video up so they are at the same time, and if either of them pauses then all three people see their video pause? A lot like Netflix Party / Youtube Party for videos. I am quite new to JS
It's possible to set and read the current time of a video in JavaScript with HTMLMediaElement.currentTime. You can also play/pause and check if its playing with either the paused attribute or the pause/play events.
You will need some form of backend to keep track of when all of this happens and to relay the appropriate time/events to everyone watching which is outside the scope of basic DOM JS (though there are JS based backends if that's your thing).
You'll probably need some form of live two-way connection like a websocket.
Alright, I'm working on one project which involves html5 audio, in addition to that a video is shown while audio is playing (Just video, no controls etc). Video is a visualisation (sometimes called equaliser) of audio that is playing, made beforehand in adobe after effects. both files (video and audio) are same length e.g. 3 min 20 sec. I need a way to synchronise both, as video might load slower than audio or vice versa. Therefore I need to make it so that on computers with slow internet connection if video stops loading at some point and starts buffering I need to pause audio, and once video resumes start audio again, both at exactly same time, also when user skips to a certain bit in a song, video should skip to that bit as well, I'll use custom api made player for video so there would be no controls on video, only on soundcloud player.
It is almost as if I was using soundcloud custom player to control video. I'm struggling to find any resources on this anywhere, and would really like to know how to achieve this functionality.
javascript or jQuery solutions are preferable.
What makes it even more complicated is that I use SoundCloud's custom player to play songs:
http://developers.soundcloud.com/docs/custom-player#
And upload videos to Vimeo/YouTube (all done to decrease load on a website)
Check here: http://html5demos.com/two-videos
The sample is for syncing 2 videos, but with some hacking probably you can manage to sync audio and video.
Second, don't use Custom player, make your own HTML5 Audio element, check the SoundCloud API there is a property stream_url for every streamable track on soundcloud, just put that URL as source on your html5 audio tag.
Keep on mind that this will not work on Firefox and Opera for some time. Firefox will integrate native mp3 support in v20, not sure about opera
I've been evaluating HTML5 audio on iOS 4 and have been trying to understand its limitations. From what I can tell...
It is possible to play audio in the background
It is not possible to fire JavaScript events in the background upon track completion
It is possible to fire JavaScript events while the screen is off, but Safari must be in the foreground (before turning the screen off)
My goal for this current project is to create a dynamic playlist that will continue to fire events and move to the next track even while Safari is not in the foreground. Is this possible with the current way HTML5 audio works on iOS?
I am curious about how the chaining of JavaScript events works on iOS if anyone has additional information. It seems that you are allowed to queue back to back sounds, but it must happen shortly after a "human" function happens (for example, tapping an element). Anything else that tries to queue a sound outside of this human function is denied the ability to play.
Also...
Is it even possible to have events that fire to move a real iOS application to the next track? It seems as if the application is only allowed to finish its current audio stream and then it goes into an idle state. Just trying to figure out all the angles here!
This is quite an old question, so I'm not sure if you've found an answer already or not.
One thing I know is that an audio clip cannot be played via JavaScript on mobile Safari.
Autoplay audio files on an iPad with HTML5
The only way to make audio play, is through a click event. This wasn't the case on 3.x, but on 4.x it is. This is because Apple doesn't want the webapp to download audio on a 3g connection programmatically, so they force the user to initiate it.
I would think that if all of the tracks were started downloading (cached), then it may be possible. I would try forcing the user to start one track, and at the same time call .load() on all of the other tracks (in the same click handler). This will force the iOS device to start downloading the audio tracks, and you may be able to play the next track (not sure though).
Right now I'm trying to add a button to a webpage that when pressed will start playing a .wav file by dynamically adding an embed tag to the DOM. The text switches to "Stop" while the sound plays, and I'd like to be able to switch it back automatically to "Play" once the file has finished playing.
How would I be able to execute some Javascript automatically when the file is finished?
Thanks.
I would wrap the sound in a very simple flash movie, and use actionscript to trigger a javascript function at the end.
Here is a list of open-source flash ide :
http://osflash.org/open_source_flash_projects
(That's how google did it in gmail)
Use jPlayer for jQuery, it has an event that triggers when the sound has finished playing.
Requires client-side Flash, but the first Flash players works even when my Firefox Flash-blocker is enabled.
They have several demo players already built.
If you are embedding a player to play the file (as opposed to just allowing the browser to try to figure what to use on its own (QT, WMP etc.)) then the player should have its own events you can hook into. That depends on the player you use.