Modern web pages can play audio (music, podcasts, sound clips) using the standard HTML5 audio tag.
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
AmplitudeJS solves this problem. It is a free tool that lets you build an audio player with any look you want — and the J1 Template already includes three ready-made players based on it. You do not need to write any code: just drop a player into a page and it plays.
5-10 Minutes to read
AmplitudeJS
The J1 Template plays normal audio files (for example .mp3, .m4a, or .wav) using ready-made players based on AmplitudeJS. All three players use the same color theme, called Uno, which matches the rest of your site so the player blends in with your page design.
You can choose between three player styles:
-
Mini Player — small, just the basics
-
Compact Player — medium size, the default choice
-
Large Player — big, with everything visible at once
| All three players work on mobile phones and tablets. You can tap the buttons just like you would click them on a desktop computer. |
Features You Get Out of the Box
Every player in the J1 Template comes with a useful set of features built in. You do not have to set them up — they just work:
- Play, pause, next, previous
-
Standard playback controls. Start a song, stop it, or jump to the next or previous song in the playlist.
- Skip forward and back
-
Jump a few seconds inside the current song, without dragging the progress bar.
- Volume slider
-
A simple slider for setting how loud the audio is. The starting volume can be set in advance, so a player never starts too loud.
- Shuffle
-
Plays the songs in a playlist in random order.
- Repeat
-
Starts the playlist over from the first song after the last one finishes.
- Song information
-
Shows the song title, the artist, the album name, and the album cover for the song that is playing right now.
- Star rating
-
Each song can have a star rating (like in many music apps) to mark your favorites.
- Fade in and fade out
-
A song can fade in at the start and fade out at the end, instead of starting and stopping abruptly.
- Custom start and end
-
A song can be told to start a few seconds into the file or to end before the very end. Useful for skipping silent intros or long outros.
- Touch friendly
-
All buttons and sliders react to taps and swipes on a phone or tablet, not only to mouse clicks.
Mini Player
The Mini Player is the smallest of the three players. It shows only the basics: play and pause buttons, the song title, and a small progress bar.
Use the Mini Player when you want to add audio to a page without taking up much space. You will recognize this style from many music streaming sites and podcast pages, where a small player floats at the bottom of the screen or sits inside an article.
Compact Player
The Compact Player is the default player in the J1 Template. It is a medium-sized player that shows the playback controls and a list of songs (the playlist) side by side.
It is a good middle ground between size and features: it fits neatly into a page layout without taking over, and visitors still get a real playlist they can browse through.
Large Player
The Large Player shows everything in one place: big album art, song title, artist, album name, all the playback controls, a volume slider, and the full playlist — all visible at the same time, without having to open extra windows or panels.
Use the Large Player when audio is the main focus of the page. It works well on a dedicated music page, an artist page, or an album page where visitors come specifically to listen.
AmplitudeJS over YouTube
The J1 Template can also play the audio of a YouTube video using an AmplitudeJS player. The video picture itself is hidden — visitors only hear the sound, the same way a normal audio player works.
This is useful when:
-
the music you want to play is already on YouTube, and
-
you do not want to download or re-host the audio file yourself.
To make this possible, the J1 Template adds a small extra piece of code called ytp (short for YouTube Plugin). It loads the YouTube video quietly in the background and connects the AmplitudeJS player buttons to it, so playing, pausing, and skipping behave just like with a normal audio file.
| At the moment, only videos from YouTube can be used as an audio source. Other video sites (for example Vimeo or Dailymotion) are not supported. The ytp plugin manages a list of YouTube videos as if it were a normal audio playlist — so you can build a YouTube playlist the same way you would build one with mp3 files. |
| The YouTube audio feature is only available inside the J1 Template, and only with the Large Player style. The Mini Player and the Compact Player are for normal audio files only. |