[Back to Index]

MyPlayer Usage by Examples

Table of Contents

Always Required

To embed MyPlayer in your webpage put this in the <head> section of your document: 

<script type="text/javascript" src="/path/to/js/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/myplayer.min.js"></script>
<link rel="stylesheet" href="/path/to/css/myplayer.css" />

Some (most?) webservers should be configured to serve audio files with their correct MIME-Types so that playback in the browser works reliably. The following example for the Apache webserver could be included in a file .htaccess in the directory holding the audio files:

AddType audio/mpeg .mp3
AddType audio/ogg .ogg

This example will enable correct MIME-Types when serving files that end with .mp3 or .ogg.

Mode "list"

If you have URLs of audio files as a JavaScript array, create the player with option mode set to "list". The list items are passed either in object notation or as a plain strings containing the URLs:

<script type="text/javascript">$(function(){MyPlayer({
   mode: 'list',
   list: [
      {url: '/something.mp3', title: 'Something'},
      {url: 'http://example.com/snd/else.mp3'},
      "./entirely.ogg"
   ]
})});</script>

Demo: list.html

Note: The property title is optional, and if it is omitted, the last component of the URL path is used as a title in the playlist. In above example, the second entry's title would be else.mp3 and the third one's would be entirely.ogg.

Mode "mp3url"

Play all links ending with .mp3 found at a given URL mp3url:. 

<script type="text/javascript">$(function(){MyPlayer({
   mode:   'mp3url',
   mp3url: '/directory/with/your/mp3s/'
})});</script>

Note: Directory indexes should be enabled on the directory containing the files, when using the Apache webserver this can be possible by placing an .htaccess file into that directory:

Options +Indexes

Demo: mp3url.html

Mode "m3u"

Play all links found in an M3U-File specified by URL m3u:

<script type="text/javascript">$(function(){MyPlayer({
   mode: 'm3u',
   m3u:  '/some/place/play.m3u'
})});</script>

Demo: m3u.html

If the M3U is in EXTM3U format, the player will attempt to parse the EXTINF information (playtime, title) where available.

Demo: extm3u.html

Note: The player will to some degree try to resolve relative entries in an M3U. If an entry is encountered that is not an absolute https?|ftp|file URL, it will try to make the entry absolute by prepending it with the path of the M3U.

Demo: relative-m3u.html

Option "element"

The default for the player is to append its UI to the <body> of the current document. Using the element option you have more control over the placement of the player UI. This option uses jQuery selector notation.

Append the player UI to the contents of the element with ID myplayer:

<script type="text/javascript">$(function(){MyPlayer({
   element: '#myplayer',
   mode:    'm3u',
   m3u:     '/some/place/play.m3u'
})});</script>

Demo: element.html

Option "detachable"

The default for the player is to offer a "detach" button that will cause it to re-open itself in a separate (popup) window. If you do not want this, set the option detachable to false:

<script type="text/javascript">$(function(){MyPlayer({
   mode:       'm3u',
   m3u:        '/some/place/play.m3u',
   detachable: false
})});</script>

Demo: detachable.html

Option "id3"

Important Note: My tests prove the ID3 implementation provided here to be unreliable. Please use this option with caution. If you want to provide neatly formatted metadata for your tracks, please also consider the m3u option with EXTINF information.

Setting the option id3 to true will cause the player to attempt reading artist name and track title from the ID3 tags found in the .mp3 files.

Playback can commence before the lookups are complete (they might take a while). An Ajax loading indicator is displayed for a few seconds next to the tracks currently being looked up.

<script type="text/javascript">$(function(){MyPlayer({
   mode: 'm3u',
   m3u:  '/some/place/play.m3u',
   id3:  true
})});</script>

Demo: id3.html

Note: If you do not want the animated loading indicator, you can prevent it by setting the option loader to false.

Options "autoplay", "loop", "shuffle"

Setting the option autoplay to true will cause the player to immediately start playback when the site is ready.

Setting the option loop to false will cause the "Loop" function to be disabled when the player is loaded.

Setting the option shuffle to true will cause the "Shuffle" function to be enabled when the player is loaded.

<script type="text/javascript">$(function(){MyPlayer({
   mode:     'm3u',
   m3u:      '/some/place/play.m3u',
   autoplay: true,
   loop:     false,
   shuffle:  true
})});</script>

Demo: autoplay.html

Option "types"

Setting the option types to a non-empty array of strings will interpret those strings as filename endings to consider for playback. The matching will be performed case-insensitive.

The following example will build the playlist from the lines in the given play.m3u, but it will only consider entries that end with .ogg:

<script type="text/javascript">$(function(){MyPlayer({
   mode:  'm3u',
   m3u:   '/some/place/play.m3u',
   types: ['ogg']
})});</script>

Demo: types.html

Option "filematch"

Setting the option filematch to a RegExp object will cause filename matching to be performed using that regular expression.

Note: If this option and the option types are both present, then this option has no effect, and the values in the array types apply instead.

The following example will build the playlist from the lines in the given play.m3u, but it will only consider entries that start with a digit and end with .ogg. Please note that matching is performed on the entire URL, so in order to match the filename only, more complex regular expressing is neccessary:

<script type="text/javascript">$(function(){MyPlayer({
   mode:      'm3u',
   m3u:       '/some/place/play.m3u',
   filematch:  /(^|\/)[0-9][^\/]*\.mp3/i
})});</script>

Demo: filematch.html

Option "network"

Setting the option network to true enables limited support for network streams (native playback does not work with some broadcast servers).

All filename matching will be disabled, meaning the types and filematch options have no effect.

The timerail will be disabled in the GUI.

Play an M3U containing only network stream entries:

<script type="text/javascript">$(function(){MyPlayer({
   mode:    'm3u',
   m3u:     'http://example.com/streaming.m3u',
   network: true
})});</script>

Demo: network.html

Implementation Note: if network is set to true then mediaelement.js will be forced to mode 'native' on network streams (this is accomplished by a patch to mediaelement.js).

[Back to Top]