For a side-project (http://lekkerluisteren.nl) I am using HTML5 audio tags and controlling them via JavaScript. The side project is a simple radio-stream aggregator that features multiple audio tags on a single page so a visitor can start playing a radio stream. On that page, I hide the controls of the audio tags and use a custom play buttons to trigger the stream to play.

While building the page, I found out that on iOS mobile Safari, you cannot start playing an HTML5 audio tag without user action (click or tap). So for instance, you cannot use a server-side JS view response for triggering an HTML5 audio or video play. The reason why automatic/server-side control is disabled, is because you don't want random audio/video-tags around the web steal your mobile data package and cost you a lot of money.

Sample: HTML5 audio tag control via JavaScript

So how do you start playing a HTML5 audio-tag from JS with a custom play button? Here's a sample in CoffeeScript:

The reason I'm calling load() on every play-click is that I'm using live streaming source URLs for the audio tag. When calling load() I make sure that the stream gets re-buffered from the current moment.

Sample: Stop other elements when playing one

My page shows multiple audio tags, so when you start listening to one, I want to pause the other audio tags. Here's how I do that:

Questions or comments?

Did you enjoy this post? If you have any questions or comments, please let me know! You can reach me on Twitter via @michiels or send me an email at mailto:michiel@firmhouse.com.

‍