JS Tutorial
- Overview
- Documents
muPlayer is a jQuery plugin that allows you to easily create an HTML5 audio player that replaces the default player of a web browser on web pages.
With just a few lines of code you can customise the behaviours and function of the player. In addition to the very basic controls the default players provide you, such as the play/pause, mute, volume adjustment, repeat playing and playback progress, it features multi audio files playback, selection play, repeat all, palyback speed adjustment, audio info display (title, artist and album) and customisable interface.
Browser Support
muPlayer is currently based on HTML5 DOM and supports the following browser versions and above:
- Internet Explore 9
- Chrome 32
- FireFox 21
- Safari 5
- Opera 19
Source: ryan-yang.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="demo/mu-player.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="demo/jquery-ui-slider.js"></script> <script src="demo/mu-player.js"></script>
2. HTML
<div id="demo"></div>
3. JAVASCRIPT
var list = [
{
title: "Only",
artist: "Enya",
album: "A Day Without Rain",
src_mpeg: "demo/enya-only.mp3",
src_ogg: "demo/enya-only.ogg",
src_wav: "demo/enya-only.wav"
},
{
title: "The Search",
artist: "Elliot Wheeler",
album: "Moccona Coffee Ad",
src_mpeg: "demo/the-search.mp3",
src_ogg: "demo/the-search.ogg",
src_wav: "demo/the-search.wav"
}
];
$("#demo").mu_player({tracks: list});
4. OPTIONS
You need to supply an object that contains at least the mandatory list of audio you want the player to play as an argument to the mu-player function call. This object can also contains other properties and values as the optional settings for configuring the player. The below table summarises all the available settings you can provide to the player. Each property name is linked to a complete description of it.
| Property | Description | Default |
|---|---|---|
| tracks | (Required) An array of objects, each contains info about an audio file that will be played and displayed by the player. | [ ] |
| track | An array index that points to the audio in the required tracks array, which specifies the first audio file to start playing. | 0 |
| controls | Uses the browser's default audio player instead of the muPlayer. | false |
| autoplay | Automatically plays the current audio when the player is shown on the page. | false |
| loop | Plays the current audio repeatedly. | false |
| loop_all | Infinitely loops the audio files in the playlist. | false |
| volume | Set the playback volume. This is a number between 0 (mute) and 1 (max volume). | 0.5 |
| mute | Mutes the sound from the player. The volume value is retained. | false |
| speed | Sets the playback speed. This is a number between 0.5 (half speed) and 2 (twice the normal speed). | 1 |
| preload | Sets the preload attribute for the <audio> element, which specifies how audio should be loaded when the page loads. Possible values are "auto", "metadata" and "none" | "" |
| info_panel | Shows the panel for displaying the information for the current playing audio. | true |
| ctrl_panel | Shows the panel that contains the buttons and sliders for controlling the playback behaviours. | true |
| playlist | Displays a list of audio in the sequence specified in the tracks array. | true |
| lbl_title | Sets the label text for the audio title in the information panel. | "" |
| lbl_artist | Sets the label text for the audio artist in the information panel. | "Artist" |
| lbl_album | Sets the label text for the audio album in the information panel. | "Album" |
| lbl_pl_title | Sets the heading text for the title column of the playlist table. | "Title" |
| msg_nosupport | A text that displays on the browser's default player if the browser does not support the audio tag. | "" |
tracks
This is the only mandatory setting you must supply to the mu-player function as it represents a list of audio files you want the player to play and at least it should contain one audio for the player to play. Otherwise, the player wouldn't show up.
A valid value for the tracks property is an array of objects, with each object contains the at least one URL for the audio source. You can also provide some other optional information for the audio files in these objects. The following table summarises all the available settings in each of the objects.
| Property | Description | Default |
|---|---|---|
| src_mpeg | Specifies the URL of the audio file that has the MIME type of audio/mpeg | "" |
| src_ogg | Specifies the URL of the audio file that has the MIME type of audio/ogg | "" |
| src_wav | Specifies the URL of the audio file that has the MIME type of audio/wav | "" |
| title | Specifies the title of the audio file that will be displayed on the information panel and playlist. | "" |
| artist | Specifies the artist of the audio file that will be displayed on the information panel. | "" |
| album | Specifies the album of the audio file that will be displayed on the information panel. | "" |
track
Specifies the array index of the audio in the tracks array that will be the first audio for the player to play. A valid value is an integer within the index range of the tracks array. The value will be reset to the default value of 0 if an invalid value is supplied.
controls
A boolean value specifies whether to use the browser's default player or the muPlayer on the web page. The default is false (use the muPlayer). The value will be reset to default if an invalid value is supplied.
autoplay
A boolean value specifies that the audio will start playing as soon as it is ready. The default is false. The value will be reset to default if an invalid value is supplied.
loop
A boolean value specifies that the current audio will start over again, every time it is finished. The default is false. The value will be reset to default if an invalid value is supplied.
loop_all
A boolean value specifies that the first audio in the playlist will be played every time the last audio in the playlist has finished playing. The default is false. The value will be reset to default if an invalid value is supplied.
volume
A number value between 0 and 1 (inclusive) that initialises the playback volume of the player. 0 is the minimum value, which is silent, whereas 1 is the maximum volume. The default is 0.5, half of the maximum volume. The value will be reset to default if an invalid value is supplied.
mute
A boolean value specifies that the audio output should be muted. The value for playback volume is retained when it is set to true. The default is false. The value will be reset to default if an invalid value is supplied.
speed
A number value between 0.5 and 2 (inclusive) that initialises the playback speed of the player. The default is 1, which is the normal playback speed. 0.5 is half the normal speed whereas 2 is twice the normal speed. The value will be reset to default if an invalid value is supplied.
preload
A string value specifies how the audio should be loaded when the page loads. The default is "". The value will be reset to default if an invalid value is supplied. The table below describes each possible value.
| Value | Description |
|---|---|
| auto | The browser should load the entire audio file when the page loads. |
| metadata | The browser should load only metadata when the page loads. |
| none | The browser should not load the audio file when the page loads. |
info_panel
A boolean value specifies whether to show the panel for displaying the information for the current playing audio. The default is true. The value will be reset to default if an invalid value is supplied.
ctrl_panel
A boolean value specifies whether to show the panel that contains the buttons and sliders for controlling the playback behaviours. The default is true. The value will be reset to default if an invalid value is supplied.
playlist
A boolean value specifies whether to display a list of audio in the sequence specified in the tracks array. The default is true. The value will be reset to default if an invalid value is supplied.
playlist
A boolean value specifies whether to display a list of audio in the sequence specified in the tracks array. The default is true. The value will be reset to default if an invalid value is supplied.
lbl_title
A string value sets the label text for the audio title in the information panel. It is a text label on the left on the audio title. The default is "". The value will be reset to default if an invalid value is supplied.
lbl_artist
A string value sets the label text for the artist of the audio in the information panel. It is a text label shown on the left of the name of the artist of the audio. The default is "Artist". The value will be reset to default if an invalid value is supplied.
lbl_album
A string value sets the label text for the album of the audio in the information panel. It is a text label shown on the left of the name of the artist of the audio. The default is "Album". The value will be reset to default if an invalid value is supplied.
lbl_pl_title
A string value sets the heading text for the title column of the playlist. The default is "Title". The value will be reset to default if an invalid value is supplied.
msg_nosupport
A string value that specifies a text to display to the users on the web page if the browser does not support the audio tag. This is used to let the users know that their browser does not support the HTML5 audio tag. The default is "". The value will be reset to default if an invalid value is supplied.
