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. |
Bea and her Business
Bea (Wheeler) is a young British pop singer. Her songs are about real life, feelings, and growing up. Many people enjoy her music because it is honest, funny, and authentic.
Diana Krall
Diana Krall is a famous Canadian jazz singer and pianist. She was born on November 16, 1964, in Nanaimo, British Columbia. She became a star with albums such as Stepping Out (1993) and When I Look in Your Eyes (1999), which earned her a Grammy for Best Jazz Vocal. Her style mixes classic jazz standards with her deep voice and strong piano skills.
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. Every modern browser supports the HTML5 video tag <video> out of the box, so you no longer need older plugins like Flash Player, QuickTime, or Silverlight.
The J1 Template plays videos from your own website and from online sources on the Internet (such as YouTube).
Curious? Have a look at the next page: Video Player.