HTML audio Tag

# HTML audio Tag ## Attributes ### controls This is a boolean attribute that specifies whether or not to display the audio controls (ie. start/pause button, scroll, volume). ``` html <audio controls></audio>  <audio controls="true"></audio> ``` Note: If it’s missing, the audio file will not be displayed. Typically, you should always include this. Unless you want to create your own control panel using JavaScript ### play and pause ``` javascript const audio = document.querySelector("audio"); const playAudio = audio.play(); const pauseAudio = audio.pause(); ``` ### autoplay This is a boolean attribute that plays the audio file automatically after the page loads. ``` html <audio autoplay></audio>  <audio autoplay="true"></audio> ``` Note: this feature might not work due to [Chrome’s autoplay policy change](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) ### mute This is a boolean attribute that specifies whether the audio will be initially silenced. The default is false or un-muted. ``` html <audio muted></audio>  <audio muted="true"></audio> ``` ### loop This is a boolean attribute that specifies if the audio file will repeat continuously from the beginning after it’s done playing. ``` html <audio loop></audio>  <audio loop="true"></audio> ``` or ``` jacascript document.querySelector("audio").loop = true; ``` ### preload This attribute is used to specify how the audio should be loaded when the page loads. It’s your way of communicating to the browser whether it should download and cache the audio file or not. ``` html <audio preload="none"></audio> ``` The browser should not load the audio when the page loads. Helpful if you want to minimize unnecessary traffic and when the user is not expected to use the media resource right away. ``` html <audio preload="metadata"></audio> ``` The browser should only load the metadata when the page loads. Again, this is used when the user doesn’t need the media resource right away. The metadata that you can fetch may include the audio length, track list, dimensions ... etc. ``` html <audio preload="auto"></audio> ``` The browser should load the entire audio when the page loads. Note: sometimes this attribute may be ignored in certain instances (ie. when preload is present). ## Single Audio Source You can set the `<audio>` with a single source using the src attribute: ``` html <audio controls src="sound.ogg"> Your browser does not support the audio tag. </audio> ``` You can also do it via the `<source>` tag: ``` html <audio controls> <source src="sound.ogg" type="audio/ogg" /> Your browser does not support the audio tag. </audio> ``` ## Multiple Audio Sources `ogg` audio files have a better sound quality and lower file size compared to `mp3` files. Unfortunately, it's not supported by all browsers. Luckily we can pass multiple sources in the `audio` tag. Hence doing it like this: ``` html <audio> <source src="sound.ogg" type="audio/ogg" /> <source src="sound.mp3" type="audio/mpeg" /> Your browser does not support the audio tag. </audio> ``` It goes top down. That is why we listed ogg first and we add a default text if the browser doesn't support the audio tag. You can view more audio support from [w3schools](https://www.w3schools.com/html/html5_audio.asp) ## CSS Styling Audio Elements You can’t style individual components of the audio player such as the button size or icons, or the font style. It will take on the default of the particular browser. But you can style the outer player unit. ``` css audio { display: /*...*/; border: /*...*/; padding: /*...*/; margin: /*...*/; } ``` ## JavaScript Audio Events You can find the full event list on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Events) ``` javascript // 1. Select our audio tag document.querySelector('audio') // 2. Attach our event listener .addEventListener('play', () => { // do something }) ``` Alternately, you can also add the event using the event attributes like this: ``` javascript <audio onplay="doSomething()"></audio> function doSomething() { // do something } ``` Essentially, the syntax for the event attributes is like this: ``` html <element on[event name]="..."></element> ``` ## Browser Support The support is excellent for all modern browsers, including Internet Explorer 9 and up 👍 [MDN Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Browser_compatibility) ## Resources * [<audio>: The Embed Audio element | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Events) * [w3schools: HTML Audio](https://www.w3schools.com/html/html5_audio.asp) * [HTML <audio> Tag - Samantha Ming](https://medium.com/swlh/html-audio-tag-4b8ee9cb3cd7) ###### tags: `HTML` `JavaScript`