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 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
HTML 5 Audio
Audio players can easily be embedded in web pages using the audio tag
<audio>. Browsers have a built-in framework for decoding and playing audio
content directly within a webpage.
AmplitudeJS Audio
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. |
Mini Player
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.
Voluptatibus impedit et necessitatibus error consectetur excepturi rem nobis est. Voluptatem placeat error iure dolorem saepe quibusdam alias tempore autem et odio veritatis occaecati. Temporibus molestias corrupti molestias ducimus amet necessitatibus quaerat quibusdam ut itaque ut molestias. Officiis cumque iste aut velit. Quaerat nulla delectus enim delectus aspernatur qui quia non omnis minus.
Compact Player
A complex component like an audio player on a web page, compact typically refers to a design or layout that minimizes the component’s space while maintaining its functionality and usability.
Molestias est explicabo dolores autem iusto aut voluptas ad. Magni et voluptas sunt aut officia dicta quo molestiae non quae pariatur. Cum libero reiciendis laborum doloremque tenetur et doloribus doloribus reprehenderit ea occaecati. Numquam possimus sint sint corporis excepturi aliquam esse commodi. Porro itaque similique velit perspiciatis omnis suscipit amet vero ut.
Large Player
Voluptatem ea culpa quo earum exercitationem voluptatem non assumenda. Qui recusandae ipsa recusandae quia asperiores dolor voluptatem maiores ut animi et ut. Quia in eius odit tempore. Eum voluptates totam et qui praesentium vitae dolor cum et. Autem dolor consectetur voluptatem voluptas consequuntur est rerum ut non unde accusamus.
What next
I hope, you’ve enjoyed exploring the possibilities J1 offers for playing digital audio content. But much, much more can the J1 do for your web in terms of multimedia.
The J1 Template support playing video on web pages by using the
HTML5 video support, the new standard of HTML. HTML5 implements a
pure HTML way to show play video on the web. Modern browsers
support the the video tag <video> for the current HTML5 standard.
The previous proprietary de facto standard software like a Flash Player, Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides HTML5 video for local content and from online sources on the Internet.
Incredible? See the next example page Video Player.