Audio
The media player audio element works very similarly. We have all the same controls and customisation options. Here's the default UI. Unlike video, there's no aspect ratio and instead the player will just take the size of the controls that are added inside. We still use a top/center/bottom rows approach for the built in UI, so controls can be added within those zones.
/
Customising
Similar to the video mode, we can style & change the controls in the same way to to suit our needs, including building a custom UI.
Minimalism for the win. Here we're just swapping out the default icons for some ionicons and only using the bottom row to have all controls in one row. Also, we've enabled the 'waveform' view for the time slider.
/
Here we're going more custom, using a nested layout & building the overall inner layout with blocks/div.
We've added a playlist inside of the player, and then added prev/next controls to allow the user to switch to the next available audio in the list. Some of the audio has it's own chapters, which can be seen in the chapter menu control (not visible in the builder). Poster images are also supported, to allow us to add an corresponding image for each audio. These images are also then used as the 'artwork' for the Media Session API for supporting browsers.
We've added a playlist inside of the player, and then added prev/next controls to allow the user to switch to the next available audio in the list. Some of the audio has it's own chapters, which can be seen in the chapter menu control (not visible in the builder). Poster images are also supported, to allow us to add an corresponding image for each audio. These images are also then used as the 'artwork' for the Media Session API for supporting browsers.