HTML5 makes it easy to add audio to a web page. Every modern browser has a built-in audio player with the standard play, pause, and volume controls — you do not need to install anything extra. The browser controls how this player looks, though, which means you cannot easily match it to the design of your website.
This is where Amplitude comes in. Amplitude lets web designers build custom audio players that look exactly the way they want. With the J1 Template, Amplitude is already integrated, so you can drop a nice-looking player into any page without writing complex JavaScript.
HTML 5 player
The simplest way to add audio to a web page is the HTML audio tag <audio>. The browser handles everything: it loads the file, plays it, and shows its standard controls.
Amplitude player
The J1 Template supports native audio files (such as MP3) and uses custom players built with Amplitude. The default look matches the Uno theme of the J1 Template, so the players blend in with the rest of your site.
Three sizes of Amplitude players are built in:
-
Mini player — the smallest size
-
Compact player — the default size
-
Large player — the biggest size, with all controls visible
| The Amplitude players in the J1 Template work well on mobile devices. On phones and tablets, touch gestures replace mouse clicks, so the players feel natural to use. |
Native player
Native players are the built-in Amplitude players for the J1 Template. They do not require plugins to play audio files, such as MP3, and serve as a replacement for the HTML5 audio element.
| See Player over YouTube for players using the YouTube plugin to play the audio part of videos provided by the YouTube platform. |
Mini player
A mini player is a small player that shows only the basic controls — play, pause, and volume. It uses very little space, which is perfect when you want music or sound to play in the background while your visitor focuses on something else on the page.
You will see mini players on music streaming services, podcast pages, and any website that wants to play audio without taking over the whole screen.
Compact player
The compact player is the default. It shows more controls than the mini player but still fits neatly into your page layout. It is a good choice when you want visitors to control the audio easily, but you do not want the player to take over the page.
You can even place several compact players side by side on the same page, for example to offer a few sample tracks.
Large player
The large player shows the full set of audio player controls in one window. It looks like a complete audio app: play, pause, skip, volume, playlist, track info, and more — all visible at the same time.
The large player works the same way as the compact one, but you do not have to open extra panels to reach the additional controls. This is the best choice when audio is the main focus of the page.
Player over YouTube
You can also use the Amplitude player to play the audio track of a YouTube video. The J1 Template adds a small plugin called ytp to Amplitude that enables this feature.
| The YouTube audio player is only available in the J1 Template and only in the large player size. Behind the scenes, the plugin loads a YouTube iframe and copies the look of the Amplitude controls. You can build a playlist of YouTube videos the same way you would build a playlist of normal MP3 files. |
Olivia Dean
Olivia Dean was born on March 14, 1999, in London. She grew up in the north of the city, in Walthamstow and Haringey. Her mother is from Jamaica and her father is English. Olivia is a neo-soul and pop singer who became known in 2019 for her own songs. In 2023, she released her first album, "Messy." Her international career started in 2026 with the album "The Art of Loving."
| If you want to see the video version of the album The Art of Loving, you can watch all the videos on the page: Video Players. |
What next
We hope you enjoyed exploring the J1 Audio features. The J1 Template can do much more with multimedia, of course — starting with video. The J1 Template supports playing video on web pages with HTML5 video, the modern web standard and using VideoJS a free, open-source video player for the web. The Template system provides VideoJS to play your own video files and video from several online platforms such as YouTube. VideoJS supports plugins that add new features. With plugins, the same player can show videos from many different sources, all with the same look and feel -- a much better experience for your visitors.
Curious? Have a look at the following page: Video Player.