Audio Examples

1. Basic

Just an audio tag wrapped in a block container.
The src points to a local mp3 file, the preload is set to none and we add a loop attribute because this sound is so lovely !
To make the whole more pleasant, we surround the container with a thin red border.
All player options are left by default except the duration since no metadata are downloaded. 

HTML



<!-- The audio tag is wrapped in a div just for a styling purpose.-->
<div class="audio-container">
	<audio preload="none" src="assets/audio/Whales.mp3" loop></audio>
</div>



SCSS



.audio-container .amst__wrapper {
  border: 1px solid rgba(161, 3, 4, 0.5);
  border-radius: 5px;
}



JAVASCRIPT



new AmstramgramMediaPlayer(
	document.querySelectorAll('audio')[0],//Our <audio> tag 
	{ 
		duration: 20//Display the duration since no metadata are downloaded.
	}
)

2. A little bit more sophisticated

Le Prince Miiaou
POISSON

Le Prince Miiaou is a french artist. Maud-Elisa Mandeau (her real name) has released 5 albums so far.
Poisson, the wonderful song you can discover here, is part of the last one : Victoire.
You should learn more about her on her official site and here...
I love her work...
Précautionneusement...

This one, we provide in the HTML code three sources with different qualities :
- MP3 128K;
- MP3 320K;
- WAV.
The MP3 320K file is defined as the default source.
The settings button allows user to change the quality. This choice is stored in local session storage and redefines the default quality.
On the other hand, the ability to change the playback speed is removed from the options.
Moreover, lyrics issued from a .vtt file provided by a track tag are displayed in a dedicated container below the player.
The download button is hidden. 

HTML



<!--The audio tag is wrapped in a div just for a styling purpose.
We set three different sources with an explicit data-quality attribute.
Those attributes are listed in the settings panel
in the order in which they appear in the HTML code.
The MP3 320K file is defined as default source
by its data-default attribute set to true.
Note that the preload attribute of the audio tag is set to none. 
Otherwise, the browser will uselessly download the metadata of the first source 
with MP3 128K data-quality that is not the default.
The audio-subtitles-display,
audio-subtitles-wrapper and
audio-subtitles-container elements
are used to display the subtitles provided by the track tag.-->

<div class="audio-container highligth">
	<audio preload="none">
		<source src="assets/audio/Le_Prince_Miiaou_POISSON_128.mp3" data-quality="MP3 128K" type="audio/mpeg">
		<source src="assets/audio/Le_Prince_Miiaou_POISSON_320.mp3" data-quality="MP3 320K" type="audio/mpeg" data-default="true">
		<source src="assets/audio/Le_Prince_Miiaou_POISSON.wav" data-quality="WAV 48K" type="audio/wav">
		<track label="English" kind="subtitles" srclang="fr" src="assets/audio/Le_Prince_Miiaou_POISSON_audio.vtt">
	</audio>
	<div class="audio-subtitles-display">
		<div class="audio-subtitles-wrapper">
			<span class="audio-subtitles-container">
				<!-- Display the artist name and the song title -->
				<b>Le Prince Miiaou<br/>POISSON<b>
			</span>
		</div>
	</div>
</div>



SCSS



//Just a little highlight for the audio player
.audio-container.highligth .amst__wrapper {
  border: 1px solid #383838;
  border-radius: 5px;
  box-shadow: 2px 2px 3px #383838;
}

//Subtitles
.audio-subtitles-display {
  text-align: center;
  margin-top: 15px;
  height: 100px;
  .audio-subtitles-wrapper {
    display: inline-block;
    padding: 15px;
    background: #333;
    border-radius: 5px;
    .audio-subtitles-container {
      white-space: break-spaces;
    }
	 /*
		amst__hide-subtitles class is added to the wrapper 
		when the player subtitles button is turned off.
		amst__subtitles-empty class is added to the wrapper
		as soon as there is no subtitle to display.
	*/
    &.amst__hide-subtitles,
    &.amst__subtitles-empty {
      display: none;
    }
  }
}



JAVASCRIPT



/*
First, we set some class global options (all the players created afterwards will get these options as default) :
- we set the crossOrigin media property to "anonymous" because subtitles may be loaded from an external url
- we hide the download button cause it's visible by default.
- we reset the playbackRates array of the settings panel
		because we don't want to give the user the ability to change playback speed.
		(by default : 
		playbackRates: [['0.25 x', 0.25], ['0.5 x', 0.5], ['0.75 x', 0.75], ['Normal', 1], ['1.5 x', 1.5], ['2 x', 2], ['4 x', 4]])
		If you really care, you can test this option in the basic example above.
- we set the subtitles button labels to Hide lyrics / Show lyrics and force its state to true 
		so the lyrics are displayed by default.
*/
AmstramgramMediaPlayer.options = { 
	crossOrigin: "anonymous",
	download: { hidden: true }, 
	settings: { playbackRates: [] }, 
	subtitles: { 
		label: { 
			on: 'Hide lyrics', 
			off: 'Show lyrics' 
		}, 
		state: true 
	} 
}

/*
- We declare a new AmstramgramMediaPlayer instance on the <audio> tag,
		set its preload option to 'auto',
		provide a duration
		and define the wrapper and container properties of the subtitles option.
- The function passed as last parameter of the constructor
		is called after the instance initialization.

IMPORTANT : preload has been set to none in HTML to prevent the browser
to downloading the metadata of the first source it finds.
Setting preload to auto in the instance options is more efficient 
because the browser will load the metadata of the source marked as default.
*/
new AmstramgramMediaPlayer(
	document.querySelectorAll('audio')[1], 
	{
		duration: 262,
		preload: 'auto',
		subtitles: { 
			wrapper: '.audio-subtitles-wrapper', 
			container: '.audio-subtitles-container' 
		},
	}, 
	function () {//Function called after instance initialization
		/*
		If the subtitles wrapper is styled with padding and background-color (which is the case here),
		it will be displayed as an empty rectangle when there is no subtitles.
		To avoid this, the instance adds to it the amst__subtitles-empty class
		each time there is no subtitle to display.
		This class just sets the display property to 'none'.
		But here, we'd like to show the track info written in the container.
		So, we just remove the amst__subtitles-empty class.
		*/
		document.querySelector('.amst__subtitles-empty').classList.remove('amst__subtitles-empty')
	}
)

Video Example

Same artist... Same song...
But with some pictures...
And a poster, preview thumbnails, subtitles, a vertical volume slider and five qualities... 

HTML



<!-- We set five different sources with an explicit data-quality attribute.
Those attributes are listed in the settings panel
in the order in which they appear in the HTML code.
The 720p file is defined as default source
by its data-default attribute set to true.
Note that preload attribute of the <video> tag is set to none. 
Otherwise, the browser will uselessly download the metadata of the first source 
with 240p data-quality that is not the default.
The poster source is simply set through the <video> tag poster attribute. -->

<div class="video-container">
	<video preload="none" poster="assets/video/Le_Prince_Miiaou_POISSON.jpg">
		<source src="assets/video/Le_Prince_Miiaou_POISSON_240p.mp4" data-quality="240p">
		<source src="assets/video/Le_Prince_Miiaou_POISSON_360p.mp4" data-quality="360p">
		<source src="assets/video/Le_Prince_Miiaou_POISSON_480p.mp4" data-quality="480p">
		<source src="assets/video/Le_Prince_Miiaou_POISSON_720p.mp4" data-quality="720p" data-default="true">
		<source src="assets/video/Le_Prince_Miiaou_POISSON_1080p.mp4" data-quality="1080p">
		<track label="English" kind="subtitles" srclang="fr" src="assets/video/Le_Prince_Miiaou_POISSON.vtt">
	</video>
</div>



JAVASCRIPT



/*
As mentioned in the previous example, we begin by setting the class global options :
- we hide the download button because it's visible by default.
- we reset the playbackRates array of the settings panel
		because we don't want to give the user the ability to change playback speed.
		(by default : 
		playbackRates: [['0.25 x', 0.25], ['0.5 x', 0.5], ['0.75 x', 0.75], ['Normal', 1], ['1.5 x', 1.5], ['2 x', 2], ['4 x', 4]]),
- we set the subtitles button labels to Hide lyrics / Show lyrics and force its state to true 
		so the lyrics are displayed by default.
*/
AmstramgramMediaPlayer.options = { 
	download: { hidden: true }, 
	settings: { playbackRates: [] }, 
	subtitles: { 
		label: { 
			on: 'Hide lyrics', 
			off: 'Show lyrics' 
		}, 
		state: true 
	} 
}

/*
We declare a new AmstramgramMediaPlayer instance on the <video> tag,
set its duration to 261 (i.e. 4 minutes and 21 seconds :
thus, the correct duration is displayed even though the metadata have not been loaded).
define the thumbnails src and choose a vertical volume slider.
*/
new AmstramgramMediaPlayer(document.querySelector('video'), {
	duration: 261,
	thumbnails: { 
		src: 'assets/video/Le_Prince_Miiaou_POISSON_thumbnails.jpg',
		int: 2.6
	},
	volumeHorizontal: false
})

Notes

A few things you should note :
- If you start a player while another is already playing, the latter automatically pauses.
- The volume levels of the three players are linked. This can be change by setting a different value to their volumeGroup option. Moreover, each volumeGroup value is stored in the session storage and recalled on refresh or when navigating from page to page.
- The volume slider orientation is horizontal by default. It can be switched to vertical by setting the volumeHorizontal player option to false. However, on mobile devices, the volume changes are restricted to mute/unmute and there so is no slider.
- The UI changes according to the available width.
- The video controls are hidden after a delay defined by the hideControlsDelay option. On desktop, they are shown as soon as the mouse moves on player. They also can be shown/hidden by the keyboard shortcuts Shift + Arrow Up / Shift + Arrow Down. On mobile, they are hidden by a vertical down swipe and shown by a tap on video or by a vertical up swipe.
- On touch devices, video thumbnails are displayed by an horizontal swipe on the player.
- Each button can be customized : its title (that appears in tooltip when mouse hovering), but also its display properties (disabled / hidden).

You should discover some other features and options by visiting the other pages of this wiki...