Back to Blog
These are a few events you can listen to: The play event is fired when the audio playback starts: document. There is a lot of different events to play with. We can listen for events on each audio element using JavaScript, to create interesting projects and interfaces. You do so with the source tag: Working with audio events Maybe you want to use a newer standard which cuts file size in half but you still want to support older browsers. Adding multiple sourcesīrowsers can implement one audio codec but not another. You can style controls using CSS, although this is out of the scope for this introduction. Instead of autoplaying the audio in the background, you can choose to ask the browser display a set of controls to let the user play the audio when they want, have some indication of the length, set the volume and let them navigate the track: You just add a closing tag, and insert text between the opening and closing tag: Audio tag not supported Adding native controls The audio tag is very well supported, up to IE9, so nowadays there should be no need to have a placeholder text, but we have this option. You can force preloading the audio using Displaying content if audio is not supported If you don’t set autoplay, the spec says that browsers will only download the audio metadata (to find out the length, for example) but will not download the audio itself. You can also play an audio file muted using the muted attribute (not really sure what’s the usefulness of this): CORSĪudio is subject to CORS and unless you allow it on the server side, an audio file can’t be played cross-origin. The loop attribute restarts the audio playing at 0:00 if set, otherwise if not present the audio stops at the end of the file: Note: mobile browsers don’t allow autoplay Add the autoplay attribute to play the audio automatically: If not set, the browser will try to automatically determine it: Īn audio file by default does not play automatically. You can specify the MIME type of the audio file using the type attribute. To show the built-in controls, you can add the controls attribute: Which means the audio will play only if set to autoplay (more on this later) and the user can’t see how to stop it, or control the volume or move through the track. This element can stream audio, maybe using a microphone via getUserMedia(), or it can play an audio source which you reference using the src attribute: īy default the browser does not show any controls for this element. The audio tag allows you to embed audio content in your HTML pages. Discover the basics of working with the HTML `audio` tag
0 Comments
Read More
Leave a Reply. |