The presentation of the HTML audio element varies by browser and operating system. In addition, there are few options for customizing the appearance of the element to match brand guidelines or other element styles.
This module uses button and range input elements to create a custom HTML audio player. The styles for the buttons and range elements are already provided by the Forms module (which is required for use with this module). The script in the dist/script/audio.js file is also required to convert the default audio element into the TYFY custom audio player and provide the requisite event handling.
Caveat
The volume control in the custom audio player is not presented when using Safari. In iOS, access the volume parameter via JavaScript is read-only. Volume cannot be set by JavaScript. Since there is no reliable way to determine if the client is using Safari on iOS or macOS, I have simply removed the volume control if the detected browser is Safari.
Class
- .tyfy-audio-player
- Applied to a figure element containing the HTML audio element. This class identifies the audio element to convert into custom audio player.
Variables
- $tycolor-link-default
#3380cc !default;- Default color of the play/pause button and the sound on/off button.
- $tycolor-link-active
#cc3380 !default;- Hovered color of the play/pause button and the sound on/off button; accent color for the playhead and volume sliders.
- $tycolor-shade
rgba($tycolor-fg,0.15) !default;- Background color of the custom audio player.
Example
<figure class="tyfy-audio-player tymargins-off">
<audio preload>
<source src="../docs/resources/audio/Youssoupha_Sidibe_Music.mp3" type="audio/mpeg">
</audio>
</figure>
<figure class="tyfy-audio-player tymargins-off">
<audio preload>
<source src="../docs/resources/audio/Ergo_Phizmiz.mp3" type="audio/mpeg">
</audio>
</figure>