Mount Kato

QuickSearch

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.

Ambient Piano
Your browser does not support the audio tag.

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.

Emancipator · From Dusk To Dawn
Royalty Free Music · Disco 80th

Minima atque dolore et id adipisci assumenda rerum temporibus consequatur eveniet aut voluptatum cupiditate. Ea est aut voluptatem ut dolorem nihil ex modi sit facere quia dicta sunt placeat. Assumenda et quia accusantium nobis quam natus repellendus ut laboriosam in sit quod fuga. Pariatur velit enim vel aliquam ipsam aut voluptas facere. Quis debitis non voluptatem totam rerum similique doloribus quis amet omnis consequatur.

Compact Player

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.

Emancipator · From Dusk To Dawn
Royalty Free Music · Disco 80th

Delectus assumenda voluptatem maiores quos qui quia qui perferendis consectetur delectus. Natus et voluptas incidunt beatae cum cupiditate sed. Est veritatis dolorem enim enim veniam laborum praesentium numquam est fugiat. Voluptatum ut explicabo consequatur qui. Id eum pariatur soluta illo sint tempora.

Spontanorama 2024 (compact)

Large Player

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.

Emancipator · From Dusk To Dawn

Sit eum quisquam temporibus. Voluptatibus ducimus ut fugiat architecto sapiente. A quod occaecati maiores dolores numquam veritatis voluptatum asperiores atque nisi hic fugit et quae. Quia quos velit quibusdam ullam eum in vel aspernatur. Est ipsa qui quia aut et temporibus accusamus eaque et rerum qui voluptate dolore.

Royalty Free Music · Disco 80th

Officiis voluptatem atque reiciendis delectus et id porro alias quod deleniti dolor autem dolorem. Doloremque nesciunt suscipit distinctio ut impedit est est. Inventore voluptatem iure facilis cupiditate iusto qui exercitationem non quaerat similique. Eligendi illo quaerat nihil impedit praesentium. A quam sapiente beatae beatae alias.

Spontanorama 2024 (large)

What next

I hope, you’ve enjoyed exploring the possibilities J1 offers for playing digital audio content. But much, much more can the J1 Templte do for your web in terms of multimedia.

The Template support playing video on web pages by using the HTML5 video support, the new standard of HTML. It implements a pure HTML way to playback videos on the web. All Modern browsers support the the HTML video tag <video> for the current HTML 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.