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.
J1 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 player are built in:
-
Mini player — the smallest size
-
Compact player — the default size
-
Large player — the biggest size, with all controls visible
The J1 Amplitude players 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
J1 Template supports two different players to play audio over YouTube:
-
J1 Amplitude Player
-
J1 Multi Player
Both players take the audio track of a YouTube video and play it like a normal audio file. The video picture stays hidden, so your visitors only hear the sound. This is useful if the music, the interview, or the podcast you want to offer is published on YouTube, but a video window would not fit the design of your page.
| The J1 Amplitude player for YouTube is only available in the J1 Template version and currently only in the large player size. |
The two players differ in what they put around the sound. The J1 Amplitude Player looks like a classic audio app: a cover image, the track title, and a list of the songs. The J1 Multi Player is built on VideoJS and adds a full playlist that visitors can search and sort, and that remembers where they stopped listening.
| The J1 Amplitude player for YouTube read their tracks from a playlist, so you set them up the same way you would set up a player for your own MP3 files. You only give the YouTube video id instead of a file name. |
J1 Amplitude Player
You can use the J1 Amplitude player to play the audio track from YouTube videos. The J1 Template adds a plugin called ytp to the module Amplitude that enables this feature. 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.
| All Amplitude players on a page stay in sync. When you pick a title in one player, every other player that has this title moves to it as well: the title is marked in its list, and a click on its play button continues with the same title. Only one player plays at a time. |
J1 Multi Player
MultiPlayer is a complete player engine built on top of VideoJS. It gives every audio and video the same good-looking, skinnable player, and it adds a full playlist on top: a searchable, sortable list of media items that the viewer can play, rate, and continue from where they left off. It plays native mp3 audio files and two kinds of video: native videos (mp4) and YouTube videos.
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.