Add player to your website

Initial code for the player

The following codesnippet shows the most simple steps to integrate the player into your website.

  1. Add the css file in the html header.
  2. Add the 2 javascript files at the end of the html document.
    addi.min.css is a class for drag and drop support.
    mcplayer.min.css is the player.
  3. For each song you have: add an audio tag with its sources

		<!-- step 1: add the css file in the header -->
			href="/javascript/amcplayer/mcplayer.min.css" media="screen" />

		<!-- step 3: see below -->
		<!-- step 2: load and init player - before body end tag -->
		<script src="/javascript/amcplayer/addi.min.js"></script>
		<script src="/javascript/amcplayer/mcplayer.min.js"></script>
			var oMcPlayer=new mcPlayer();

Add audio files

Each song can look like that:

<audio loop="loop"
	title="My Song"
	<!-- stereo sources -->
	<source src="/download/song_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
	<source src="/download/song_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />

	<!-- surround sources -->
	<source src="/download/song_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
	<source src="/download/song_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />

	<!-- for fallback add a flashplayer here -->



Tag Attribute Comments
audio preload
I recommend always set it to "none". If you have several songs on a page and the browser loads all audios it generates lots of traffic for a client.
Name of the song. If you don't use a title tag the player will add a generated title like "No title #[counter]".
loop, controls, ...
Other audio attributes you can set for fallback if javascript is disabled on a html5 browser and the user will see the browser internal html 5 audio player.
source src source file; it is an url or a absolute/ relative path
type MIME type of the audio
.ogg: audio/ogg
.m4a: audio/mp4
.mp3: audio/mp3
data-ch, title Name of the channels. Use the same value for each source with the same count channels.
I recommend to use "2.0" for stereo mp3+ogg and "5.1" for surround m4a+ogg.
The data custom attribute is html5 standard but cannot be read in the Internet Explorer. At the moment use data-ch AND title attribute to set the channels count.
The channels will be used as label for the channel switcher buttons.

Browser support

What you need to know is that the html5 audio tag describes HOW to add an audio to a browser. BUT: different browsers support different audio formats.
You often will find the the information for stereo files.
Additionally here are the information for surround support of webbrowsers.

Best practice:
First add stereo sources to a tag. All browsers support a stereo media file, but only some support 5.1.
On PCs a surround sound card is standard for about 10 years; but most of the users have only 2 speakers.
Additionally more and more users surf with a tablet or mobile phone that don't support surround.

Opera doesn't play surround media files. It makes a mixdown of a 5.1 ogg file and plays it in stereo only.

Firefox doesn't play surround media files. It seems to play all oggfiles (all audio methods work and you get no error message; you get a progress bar and so on). There is simply no sound.

Channels Formats Browsers
stereo (2.0) MP3 (MPEG 1 Layer III)
Internet Explorer
OGG (Ogg Vorbis)
surround (5.1) AAC (MPEG 4)
Internet Explorer
newer Firefox versions (for sure since v22)
OGG (Ogg Vorbis)
newer Firefox versions (for sure since v22)
newer Opera versions (since v15)



With the shipped CSS you get a default skin.
player gui

You can create custom skins with overriding the CSS elements. To give you an entry point you can have a look to the css files in the skins directory.
To load a skin add the css file of it after the default css file of the player:

	<link rel="stylesheet" type="text/css" href="/javascript/amcplayer/mcplayer.min.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="/javascript/amcplayer//skins/mcplayer-darkgray.min.css" media="screen" />

player gui - light green skin
player gui - light brown skin
player gui - light violet skin
player gui - dark gray skin

The hot hint is: open example/example4.html to test the skins :-)


The default is a dialog style - like in the screenshots above.
You can use a player on the bottom line with adding the bottombar.css.

player gui - light green skin

Additionally you can load the colorset.

	<link rel="stylesheet" type="text/css" href="/javascript/amcplayer/mcplayer.min.css" media="screen" />
	<!-- style: default is a dialog ... to us a player on bottom side use this line -->
	<link rel="stylesheet" type="text/css" href="/javascript/amcplayer//skins/mcplayer-bottombar.min.css" media="screen" />
	<!-- color: add a color set (see example/example4.html) -->
	<link rel="stylesheet" type="text/css" href="/javascript/amcplayer//skins/mcplayer-darkgray.min.css" media="screen" />

If you have added drag and drop but the main player window should not be movable, then call .makeMainwindowMovable(false);. Then the player is fixed and the download window, playlist window is still movable.

	var oMcPlayer=new mcPlayer();

	// for fixed position of the player:

Language support

enable another language

With the shipped javascript you get an English interface.
To load a language you need to include a language file from the lang directory.
The language file contains all texts in the variable aAmcLang. This needs to be set as variable.

In this example the German languagefile (mcplayer-de.min.js) is loaded.

	<script src="/javascript/amcplayer/mcplayer.min.js"></script>

	<!-- load a lang file ... it contains data in aAmcLang -->
	<script src="/javascript/amcplayer/lang/mcplayer-de.min.js"></script>

		var oMcPlayer=new mcPlayer(aAmcLang);


translate to another language

You can help me and translate the existing language file to your mother tongue.

API Examples

Example audios

Let's start with a sample set of audios.
The following audios are linked to my website They are free for non commercial usage (license: cc 3.0 - by-nc-sa).
Axels songs

Let's Play
Lift Control
Give me a BIT more

Player Actions

Play a song based on a number:

Navigate to previous/ next song

player actions play/ pause/ stop/ ...

set a postion (a float value in sec; must be lower duration)

set channel (see getAllChannels() to get available arguments)

playing option repeat playlist

playing option shuffle playlist; see tasble below to see playlist order


The volume is a float value 0..1


min/ max player window


These are realtime infos you can fetch with different getter methods.

item method type response
current song getSong() hash ...
Id of current song in the playlist; starting with 0 getSongId() integer ...
Title of the current song getSongTitle() string ...
Position in the audio; value is in sec getAudioPosition() float ...
Duration of the audio; value is in sec getAudioDuration() float ...
get all available channels of the current song getAllAudioChannels() array ...
Currently used channels getAudioChannels() string ...
Source file; url of the current audio getAudioSrc() string ...
is playing isPlaying() boolean ...
is paused isPaused() boolean ...
is stopped isStopped() boolean ...
Get volume (value 0..1) getVolume() float ...
is muted isMuted() boolean ...
is list repeated isRepeatlist() boolean ...
is shuffled isShuffled() boolean ...
is box about visible isVisibleBoxAbout() boolean ...
is box download visible isVisibleBoxDownload() boolean ...
is box playlist visible isVisibleBoxPlaylist() boolean ...
Order of songs to play (it is randomized if isShuffled() is true) getPlayorder() array ...
number of the currently active song in the playlist (if shuffled) getPlaylistId() integer ...
Playlist getPlaylist() hash ...

Copyright © 2012-2018 Axel Hahn
project page: Sourceforge (en)
GitHub (en)
Axels Webseite (de)
results will be here