The Audio tag in HTML5 is a great way to add audio media to web pages. However, the browser fully controls the audio playback interface, which can limit or even break a page’s design if audio media is used.
AmplitudeJS for the J1 Template offers a straightforward solution for web developers. It allows them to easily customize the appearance of their audio players without the need for complex scripting. By leveraging J1 Template and Amplitude’s API, web designers can craft unique interfaces that define the visual and functional aspects of a player’s audio control elements.
5-10 Minutes to read
The J1 Template implements custom players based on the (default) theme Uno. The color scheme used matches the look and feel of the template to preserve the page design.
Three types of AmplitudeJS players are build-in for the J1 template system:
-
Mini Player
-
Compact Player (default payer)
-
Large Player
Amplitude players for the J1 Template are mobile-friendly. Instead of clicking on the appropriate elements, touch events are applied to all mobile devices. |
AmplitudeJS
The J1 Template suports native audio files (e.g. mp3) using custom players based on AmplitudeJS using the the (default) theme Uno. The color scheme used matches the look and feel of the template to preserve the page design.
Three types of AmplitudeJS players are build-in for the J1 template system:
-
Mini Players
-
Compact Players (default payer)
-
Large Players
Amplitude players for the J1 Template are mobile-friendly. Instead of clicking on the appropriate elements, touch events are applied to all mobile devices. |
Mini Players
In the context of complex components on a web page, like an audio player, a mini player refers to a minimized version of full players. It typically offers basic playback controls, such as pause, play, and volume adjustment, while taking up less screen space.
Mini players are beneficial when you want to listen to audio in the background without dedicating the entire screen to the player. They are commonly found on music streaming services, podcast platforms, and websites with embedded audio content.
Compact Players
The design of a Compact player is an efficient approach that involves condensing the player controls and display elements into a smaller area. It allows the audio player to fit neatly within the web page’s layout without overwhelming or dominating the content around it.
The player aims to balance functionality and space efficiency, ensuring users can easily access and control the audio playback without sacrificing too much screen space or placing multiple players side-by-side.
Large Players
A complex component, like an audio player on a web page, typically refers to a design or layout that minimizes the component’s space while maintaining its functionality and usability.
The large design provides the full functionality of an audio player to ensure users can easily control audio playback. The player behaves similarly to a compact player, but all controls are displayed in a single window; there is no need to open other widgets.
AmplitudeJS on Youtube
The example demonstrates playing Audio track from YouTube Video using an AmplitudJS player. The J1 template uses the video plugin ytp to extend the native functionality of the AmplitudeJS API to playback YouTube files only for the audio part.
Playing audio tracks is currently supported only for videos from YouTube (YT). The YT plugin ytp embeds a YouTube (iframe) player and mimics the AmplitudeJS player buttons and controls to manage a playlist of videos the same as known for native audio files. |
AmplitudeJS YT Player can only be used with the J1 Template. Currently, only players of type large are supported. |