[Back to Index]

# MyPlayer Usage by Examples

## Table of Contents

- Always Required - Including MyPlayer. Setting up MIME-Types.
- Mode "list" - Playing a JavaScript array of audio file URLs and titles.
- Mode "mp3url" - Reading lists of audio files from index documents.
- Mode "m3u" - Reading lists of audio files from `.m3u` files.
- Option "element" - Where the player/playlist should be placed.
- Option "detachable" - If the player can be detached or not.
- Option "id3" - Interpreting ID3-tags.
- Options "autoplay", "loop" and "shuffle" - Player behavior and defaults.
- Option "types" - Specifying filename-endings to consider.
- Option "filematch" - Specifying an URL-matching expression.
- Option "network" - Limited support for network streams.

## 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]