© 2020-2023 ← Moth Player

moth player

documentation

 

Contents

Introduction

Moth Player is a vanilla JavaScript library to implement custom HTML5 audio players in websites. Originally conceived as an audio-only, simplified substitute for jPlayer, it was built from scratch as a coding exercise.

Features

Limitations

Requirements

To deploy and configure Moth Player, we should feel comfortable working with HTML and CSS. JavaScript knowledge is not required but it would make the explanation about the script easier to follow.

How to set up

There is a plain demo (also included in the download package) that presents two players on a single webpage. One simulates a music album and the other features a mixed playlist. Between the two they cover most of the library's capabilities.

There are also custom skins, which further display styling possibilities. These are up for grabs; use and adapt them in any way you see fit.

Bare-bones approach

To start from scratch, we need an audio file, the JavaScript library —which, irrespective of the version number, should be something like moth.player.1.0.0.min.js— and an HTML file.

For this minimal example, we place all files in the same folder. We load the library from the head of our HTML:

<head>
  ...
  <script src="moth.player.1.0.0.min.js"></script>
  ...
</head>

The HTML must include a custom script with the playlist and track information, to be placed after the library inclusion, either in the head or the body of the document. There will be more on the script later, but here is the minimum that it needs to run. Assuming our audio file is hm01.mp3:

<script>
  mp_plist.audio01 = {
    supplied: 'mp3',
    tracks: [{file: 'hm01'}]
  };
</script>

The HTML elements must have specific classes so that Moth Player can put everything where it belongs. We'll describe those in a moment; for now, let's just include the essential elements inside the <body>:

<div class="moth-player">
  <audio id="audio01" class="mp-audio">
    Your browser doesn't seem to support HTML5 audio.
  </audio>
  <ul class="mp-playlist">
  </ul>
</div>

That's it. If nothing went wrong, when we open the HTML file in the browser we should see a lonely list item:

• hm01.mp3

We can click on it to play and pause the associated audio file. You can find this minimal setup here.

HTML

Moth Player reads data from the custom script (covered below) and injects it in a set of HTML elements with mp- prefixed classes —except for the parent element, with class moth-player to drive the point home.

Note: The demo and the skins include some unprefixed classes. They help to structure the page and are ignored by Moth Player.

As we have seen, to instance the player we must define the player's div and its associated audio element:

<div class="moth-player">
  <audio id="audio01" class="mp-audio">
    Your browser doesn't support HTML5 audio.
  </audio>
  <!-- ... player elements go here... -->
</div>

The player (container element) should be of moth-player class and the audio element must have a unique id —in this case, audio01— and a class mp-audio.

To include a second player in the same page, we only need to change the new audio element's id to another unique name —say, audio02:

<div class="moth-player">
  <audio id="audio01" class="mp-audio">
    Your browser doesn't support HTML5 audio.
  </audio>
  <!-- ... player elements go here... -->
</div>

<div class="moth-player">
  <audio id="audio02" class="audio-element">
    Your browser doesn't support HTML5 audio.
  </audio>
  <!-- ... player elements go here... -->
</div>

We can follow this pattern to instace as many players as we need.

The audio element's id can be anything, but it's a value to remember: we'll have to use it in the script.

The player's elements (playlist, controls, data) must be children of the parent div moth-player, and can be created in any order according to our design needs.

Controls

All of the player's controls are optional. They should be HTML elements with a certain class, as shown in the following table:

ControlClass
Play mp-play
Pause mp-pause
Stop mp-stop
Previous mp-prev
Next mp-next
Mute mp-mute
Unmute mp-unmute
Volume Max mp-vol-max
Volume Up (10%) mp-vol-up
Volume Down (10%)mp-vol-down
Repeat mp-loop
Shuffle mp-shuffle

Play and Pause need to be defined separately; Moth Player will merge them into one toggle button. The same goes for Mute/Unmute.

Here's an example setup with text buttons:

<div class="controls">
  <button class="mp-play">play</button>
  <button class="mp-pause">pause</button>
  <button class="mp-prev">previous</button>
  <button class="mp-next">next</button>
  <button class="mp-mute">mute</button>
  <button class="mp-unmute">unmute</button>
</div>

Instead of text labels, we could use images to render media icons:

<div class="controls">
  <button class="mp-play">
    <img src="img/play.png" alt="play button" />
  </button>
  ...
</div>

Note: We can choose any HTML element that makes sense for our player design: <button>, <div>, <span>, <li>... Moth Player only cares about their class.

We can also add progress/seek and volume bars. If so, they must have a container element and a bar element:

ControlClass
Prog/Seek containermp-seek-cnt
Prog/Seek bar mp-seek-bar
Volume container mp-vol-cnt
Volume bar mp-vol-bar

-bar elements must be children of -cnt elements.

<div class="mp-seek-cnt">
  <div class="mp-seek-bar"></div>
</div>
...
<div class="mp-vol-cnt">
  <div class="mp-vol-bar"></div>
</div>

Unlike <button> tags, browsers won't render the bars without CSS rules. A crude example:

.mp-seek-cnt,
.mp-vol-cnt {
  border: 1px solid #999;
  cursor: pointer;
  margin-bottom: 1rem;
}

.mp-seek-bar,
.mp-vol-bar {
  height: 1rem;
  background-color: #999;
}

Aside: Beware of mobile

Mobile devices may disregard volume controls on websites, leaving your volume-related controls rendered but useless.

By default, Moth Player uses a platform sniffer to remove all the volume controls when running on a mobile device. We can override this behavior by adding the property mobile_volume: 'true' to the custom script (see Script.)

When laying out the player, it's wise to place all volume-related controls in places where the design won't break if they vanish. By "volume-related", understand the HTML elements with the following classes:

mp-mute
mp-unmute
mp-vol-max
mp-vol-up
mp-vol-down
mp-vol-cnt
mp-vol-bar
mp-vol-text
mp-vol-number

Data

Moth Player can display some information about the media if it's provided in the custom script. To show a particular bit, we must include the corresponding HTML element with a predefined class. All are optional.

Info type Class
Album title mp-album
Artist (global) mp-artist
Artist (single track) mp-track-artist
Track number mp-track-number
Track title mp-track-title
Text while paused (1) mp-text-pause
Text while playing (2) mp-text-play
Track current/remaining time (3) mp-track-time
Track duration mp-track-length
Track progress (%) mp-track-percent
Volume number (4) mp-vol-number
Volume label (5) mp-vol-text
  1. Custom message to be displayed when the media is paused. Forms a "toggle" message with "Text while playing."
  2. Custom message to be dislpayed when the media is playing. Forms a "toggle" message with "Text while paused."
  3. Mouse click toggles between current and remaining track time (more in No Pointer?)
  4. Volume's current value shown as a number (more in Script.)
  5. Custom label for the volume value (e.g, "Volume: ".)

Typically, we include the elements that we wish to display devoid of content, as the library will fill them for us:

<div class="mp-album"></div>
<div class="mp-artist"></div>
...

However, "Text while paused", "Text while playing" and "Volume label" require custom content or nothing will show. For example:

<span class="mp-text-pause">Track selected: </span>
<span class="mp-text-play">Now playing: </span>
<span class="mp-track-title"></span>

Or (from the demo):

<div class="volume-info">
  <div class="mp-vol-text">Volume</div>
  <div class="mp-vol-number"></div>
</div>

Images

Moth Player can display a poster (an album cover) and a different image for each selected track. Normally we would have one or the other, but nothing stops us from rendering both. Just include the element with the appropriate class, mp-poster for global, mp-track-image for single tracks.

<div class="mp-poster"></div>
...
<div class="mp-track-image"></div>

Lyrics

In order to include songs' lyrics, we write a parent element with class mp-lyrics and as many child elements as lyrics we wish to transcribe, each with its own class:

<div class="mp-lyrics">
  <div class="lyrics01">
    She loves you, yeah, yeah, yeah...
  </div>
  <div class="lyrics02">
    I can't get no satisfaction...
  </div>
  <div class="lyrics03">
    Sittin' in the mornin' sun...
  </div>
</div>

Moth Player will display the lyrics of the currently selected track and hide the rest.

Classes for each of the lyrics elements ("lyrics01", "lyrics02"…) don't need to follow the mp- prefix convention; they can be named arbitrarily, but, once again, we should be aware of our choice; we'll need to reference them later on.

Playlist

The playlist is required for the player to work. The HTML is simple; just define an empty (ordered or unordered) list element with class mp-playlist:

<ul class="mp-playlist">
</ul>

Each list item features one track. Users can click on them to play or pause the associated media. Each list item is programmatically generated from the track information that we provide in our custom script —see the next section, but here's a taste:

...
tracks: [
  {
    title: 'Hollow Monkey',
    artist: 'Space Weirdo',
    extra: '0:29',
    file: 'hm01',
  },
],
...

The library will render for each track the track title, the track artist and a general field called "extra" where we can add any piece of arbitrary information. All these are optional but, unless we plan to hide the playlist, we should at least include the title.

Note: the "file" property points Moth Player to the audio file's name. More on this later.

Since the list's HTML is generated by Moth Player at runtime, we normally can't see it unless we use the browser's devtools (the demo has a button labeled "computed source" that shows it as well.) Here's what a couple of compiled list elements might look like:

<ul class="mp-playlist">
  <li class="mp-plist-current">
    <span class="mp-plist-title">Hollow Monkey</span>
    <span class="mp-plist-artist">Space Weirdo</span>
    <span class="mp-plist-extra">0:29</span>
  </li>
  <li>
    <span class="mp-plist-title">The Exact Problem</span>
    <span class="mp-plist-artist">T.e.P.</span>
    <span class="mp-plist-extra">4:28.</span>
  </li>
  ...
</ul>

The first <li> element has the class mp-plist-current, marking it as the active track, either playing or ready to go. Then it shows the track title and the track artist.

Remember: everything inside the ul element is created by the library; we don't have to write any of it.

To give us design flexibility, Moth Player creates specific classes for playlist data, in order to differentiate them from the classes that we use in out custom HTML.

Info typePlaylist classHTML class
Track number mp-plist-number mp-track-number
Track title mp-plist-title mp-track-title
Track artist mp-plist-artist mp-track-artist
Extra info mp-plist-extra mp-track-extra

This way we can choose via CSS to hide the track artist in the playlist but render it somewhere else on the page (or vice-versa.)

The class mp-plist-number for playlist numbers is generated automatically if we define a special property outside the tracks array, like so:

...
plist_numbers: 'true',
tracks: [
  {
    title: 'Hollow Monkey',
    artist: 'Space Weirdo',
    extra: '0:29',
    file: 'media/hm01',
  },
],  ...

This is an easy way to render the numbers and style them with CSS. However, we may prefer to use an ordered list, which would render by default natural numbers followed by a point:

1. Hollow Monkey

If, for some reason, we don't wish to display the playlist at all, the easiest way would be to obliterate the whole thing with CSS:

.mp-playlist {
  display: none;
}

But remember, even if we don't want it to show, we must write the list in the HTML and the tracks property in the script. Moth Player relies on the playlist object to acquire the tracks' information and feed it to the audio element.

Script1

Moth Player depends upon a JavaScript object2 (here also referred to as the 'playlist object') with information about our audio tracks. This is also where we store the data that we wish to display either as part of the player or the playlist. That means that if, for instance, we don't want the player to show the album title, there's no need to define either an album property in the script or an element with class mp-album in the HTML.

However, as we've seen in our Bare-bones setup, there are some required properties; if they're missing, the player won't work.

Free Mode vs. Supplied Mode

When the browser loads Moth Player, the library reads the custom script and checks if it can find and play the audio files. We can choose one of two modes, depending on our needs:

In Supplied Mode, the number of accepted formats is limited but safer in terms of probable browser compatibility. These are: wav, flac, mp3, ogg, oga, opus, aac, m4a, m4b, m4r, mp4, webm.

We don't need to write the file extensions when we list the audio files in the script (see below) so there's less typing and slightly cleaner code.

In Free Mode we can try to use any audio type to make a mixed-format playlist, but less common formats might be unsupported by browsers. We need to write file extensions for each file.

Supplied Mode takes a couple of extra steps to check the suitability of a format, either throwing an error or logging an event for every step (see Troubleshooting.) This gives us better information in case something happens:

free mode         supplied mode
    |                    ↓
    |             are supplied formats
    |             supported by Moth Player?
    |                    ↓
    |             are supplied media types
    |             supported by the browser?
    |                    ↓
    ------------> can audio element
                  play audio files?
                         ↓
                  create playlist,
                  display player

If a file type fails in Supplied Mode, Moth Player will try another one until it succeeds or runs out of formats to try. In Free Mode, failing to load a single file throws a fatal error and execution halts. That file must be removed from the list or substituted with one that works.

List of properties

Let's suppose that we have a playlist with three songs, all part of the same album by the same artist. We have an album cover but also single illustrations for each track. The script (this is an unrealistic property-stuffed example) might look something like this:

<script>
  mp_plist.audio01 = {
    album: 'Cosmonaut',
    artist: 'Space Weirdo',
    poster: 'cosmonaut_cover.png',
    media_path: 'media/',
    img_path: 'img/',
    mobile_volume: 'true',
    volume: '0.5',
    volume_format: '2, 2',
    plist_numbers: 'true',
    leading_zero: 'true',
    supplied: 'mp3, ogg', // either this or free_mode = 'true',
    tracks: [
      {
        title: 'Channel 9',
        img: 'channel9.png',
        caption: 'When TV ruined your life.',
        lyrics: 'lyrics01',
        extra: '4:00',
        file: 'Channel 9', // if Free Mode, add extension.
      }, {
        title: 'She Saw Me',
        img: 'she_saw_me.png',
        caption: 'Whom did she see?',
        lyrics: 'lyrics02',
        extra: '3:37',
        file: 'She Saw Me', // if Free Mode, add extension.
      }, {
        title: 'One Small Step',
        img: 'one_small_step.png',
        caption: 'And look at mankind now.',
        lyrics: 'lyrics03',
        extra: '4:21',
        file: 'One Small Step', // if Free Mode, add extension.
      },
    ],
  };
</script>

Note for the JavaScript handicapped: while some of the property values don't require quotation marks around them, their universal presence in this script does no harm and is easier to remember.

First, we have declared the property mp_plist.audio01, which tells Moth Player that (1) this is a playlist, and (2) it belongs to the audio element with id="audio01". If we instance a second player, we have to create another property and point it to the id of the second audio element: supposing the new audio element has id="audio02", the reference in the object would be mp_plist.audio02.

It doesn't matter how we "id" the audio elements, as long as the id matches the property in the playlist object.

So, whatever's in here (HTML):

<audio id="myCoolId"... >

… must be reflected here (script property):

mp_plist.myCoolId = {
  ...
};

Second, we have a list of properties that relate to this particular playlist. Some are global and some are specific for each track. All track-related properties are contained inside the tracks property.

album: 'title'. Optional. The album's title. This property will be rendered into an HTML element with class mp-album if it exists.

artist: 'name'. Optional. The artist's name for an album or a same-artist compilation. This property will be rendered into an HTML element with class mp-artist if it exists.

poster: 'image.xxx'. Optional. Here we can specify an image to serve, e.g., as the album cover art. This property will be rendered into an HTML element with class mp-poster if it exists.

media_path: 'path'. Optional. It indicates the path to the local or cloud folder containing our audio files. This property exists for convenience. We could ignore it and include the whole path before each file name (see file below) --which would be the required technique if each file has a different provenance-- but if all files are stored in the same folder, media_path saves some typing and repetition.

Note: if we include a media_path property, repeating the path in the audio file name will produce an error, as Moth Player will concatenate the two.

We can do this:

media_path: 'media/',
tracks: [
  {
    file: 'Channel 9',
  },

Or this:

// no media_path property
tracks: [
  {
    file: 'media/Channel 9',
  },

But not this:

media_path: 'media/',
tracks: [
  {
    file: 'media/Channel 9',
  },
  // Moth Player will look for 'media/media/Channel 9'

img_path: 'path'. Optional. Like media_path, this property stores the path to our poster or track images. Again, we could add the path to the poster or img properties, but if it's the same in all cases, using img_path makes for shorter, cleaner code.

Note: if we include an img_path property, repeating the path in the image file name will produce an error, as Moth Player will concatenate the two.

mobile_volume: 'true'. Optional. If present, Moth Player won't remove by default the volume controls in mobile devices.

Note: the value true doesn't require quotation marks. | Techie note: any truthy value should work.

volume: 'number'. Optional. If present, it sets the initial volume level for this player, in a number between 0 and 1. If not present, the default volume will be 0.3. Volume levels can be changed later by the user if we define volume controls.

Note: the value doesn't require quotation marks.

volume_format: (a, b). Optional. If present, it lets us define the number of digits before and after the decimal point when displaying the volume in mp-vol-number. Thus, volume_format: (2, 1) would render something like "50.2", and volume_format: (1, 2) would render the same level as "5.02". We can omit the second number if we don't want the fractional part to show —e.g., volume_format: (2) will render just "50". If this property isn't present, it defaults to volume_format: (0, 2), displaying the volume level as "0.50".

plist_numbers: 'true'. Optional. If present, it tells Moth Player to render playlist numbers in the playlist, inside a <span> element with class mp-plist-number.

Note: the value true doesn't require quotation marks. | Techie note: any truthy value should work.

leading_zero: 'true'. Optional. If present, it tells Moth Player to pad track numbers 1 - 9 in mp-track-number and mp-plist-number with a leading zero --"1" will be shown as "01".

Note: the value true doesn't require quotation marks. | Techie note: any truthy value should work.

supplied: 'file type(s)...'. Option/Required. Activates "Supplied Mode." Alternative to free_mode. This is where we indicate the file format(s) that we feed to Moth Player, in a comma-separated list.3 Some browsers prefer some file types over others, so having different versions of our audio tracks seems wise. Nowadays, we're mostly safe if we supply both ogg and mp3.

Moth Player will check this property4 and choose the first format that the browser deems worthy. We must at least provide one. Additionally, once a format is chosen, Moth Player will append the file extension automatically to all the file names given in the file property (see below.) Meaning, Moth Player assumes that all the files are provided in that particular format.

free_mode: 'true'. Option/Required. (Not shown in the example code.) Activates "Free Mode." Alternative to supplied. Useful when we need to set up a playlist with different audio formats.

Free Mode requires that we write the extensions to all the file names given in the file property (see below.)

Note: the value true doesn't require quotation marks. | Techie note: any truthy value should work.

tracks: [array]. Required. Here is where we specify all the information pertaining to individual tracks. As can be seen from the example code, there are a few possible properties, all of them optional with the exception of file. We must at least define one track.

CSS

If we're not using a skin, we must style every element of Moth Player with CSS rules that target the relevant class selectors.

The included CSS file in the demo renders a couple of austere players, but it records most of Moth Player's styling quirks, described below.

Hidden selectors

In order to perform certain actions, Moth Player silently adds and removes a few CSS selectors. We should be aware of them, because they warrant some styling as well.

.mp-plist-current: When a track is loaded or playing, it receives the class mp-plist-current. This allows us to address it with some CSS rules and make it stand out from the rest in the playlist. In Moth Player there's always a "loaded" ("active", or "selected") track, even if it's paused.

.mp-looped: The Repeat button is a toggle control; it's either "on" or "off" —default is "off". When we click it and turn it "on", it acquires the mp-looped class, which lets us apply a different style to it and thus signify the event.

Note: Repeat affects the whole playlist, not single tracks.

.mp-shuffled: Akin to Repeat, the Shuffle button is a toggle control. When "on" it has the mp-shuffled class.

.mp-time-left: This class gets added/removed to the element with .mp-track-time class when users click on it. Bear in mind that .mp-track-time is never removed.

.mp-warning: When Moth Player runs, it checks that the audio files reside where they should and that they can be played by the browser. During this process, the player is hidden and a div with class mp-warning is created in case something fails and the library needs to display an error message.

Playlist

As seen in the HTML section, Moth Player generates playlist items by reading the corresponding properties declared in the script. The library creates <span> elements with specific classes for each property and injects them into the <li> elements. There are four optional fields that, if present, are displayed in this order: number, title, artist and extra.

Suppose we define the following properties in the script:

...
plist_numbers: 'true',
tracks: [
  {
    title: 'Channel 9',
    artist: 'Space Weirdo',
    extra: '4:00',
    file: 'Channel 9',
  },
],
...

Moth Player would generate a playlist item in the HTML:

<li>
  <span class="mp-plist-number">1</span>
  <span class="mp-plist-title">Channel 9</span>
  <span class="mp-plist-artist">Space Weirdo</span>
  <span class="mp-plist-extra">4:00</span>
</li>

These fields are rendered inline with no characters between them, not even spaces. The above example, without styling, would display:

•1Channel 9Space Weirdo4:00

This madness attempts to give us options when laying out playlists (separator characters, positioning, etc.) rather than force some default behavior that can't be formatted to our liking. To add proper legibility, we need to write CSS rules and put some ::after and ::before selectors to work.

Let's say for instance that we want the artist field to read "by Space Weirdo" in a new line, with a smaller font:

.mp-plist-artist {
  display: block;
  font-size: .875rem;
}

.mp-plist-artist::before {
  content: 'by ';
}

No id's?

Moth Player targets class attributes, not id attributes (with the exception of the audio element, which doesn't render on the screen.)

That leaves the possibility of adding id attributes where we need them for other purposes, including design. We could add unique identifiers to the player elements, if there is more than one:

<div class="moth-player" id="player-1">
...
</div>
<div class="moth-player" id="player-2">
...
</div>

… and then all of their respective children can be singled-out in CSS:

#player-1 .mp-play {
  ...
}

#player-2 .mp-play {
  ...
}

No pointer?

An element with class mp-track-time renders, by default, the track's current time. With a mouse click, it changes to show the track's remaining time. Convention dictates that, when something exciting may happen if you click on an element, the cursor should change its appearance to mark the fact; but you may choose to ignore convention and Moth Player doesn't assume.

We need to explicitly declare a CSS rule for this to happen:

.mp-track-time {
  cursor: pointer;
}

Troubleshooting

So, Moth Player doesn't work. Let's see what we can do about that.

Basic Checklist

Most problems are syntax-related or come from typos. Please check:

Devtools & Console

Modern mainstream browsers offer Web Development Tools (a.k.a. Devtools). Here we can access the DOM tree, which shows nodes and classes created by Moth Player at runtime --such as the playlist items-- and a JavaScript console that reports errors encountered as the browser tried to execute our code.

Moth Player will log messages in the console to mark some events in the code flow and to document known incidents. Use this information in combination with error messages to pinpoint the cause of the problem.

Most messages are preceded by Player audio_id ([Supplied/Free]):, which shows the id of the player under scrutiny (useful if there's more than one) and whether it's in Free or Supplied mode.

Supplied array is [ext1,ext2...]. Moth Player has read the file types in the supplied property and put them in an array (a list of variables), so that they can be checked one by one.

Moth Player checks each format for compatibility, first against an internal list of accepted formats, then against the browser's opinion about the MIME type. If a file type fails a test, it's removed from the list and this message appears again to tell us which formats are still in play.

File type "ext" unsupported by Moth Player. Pruning from array. A file type in the "Supplied array" isn't part of the internal list of accepted formats (see Free Mode vs. Supplied Mode.) Moth Player will remove it from the list.

Browser reports it [can probably / can maybe / can't] play the media type MIME_type. Moth Player now reports the browser's response regarding its ability to play the supplied media type.

The browser may say "probably" or "maybe" (in which case we accept the format and move on) or say nothing (passive-aggressively meaning "no"). If "no", see the next message.

File type "ext" unsupported by the browser. Pruning from array. The file type (MIME type) is unsupported by the browser. Moth Player will remove it from the list.

file.ext could NOT be loaded. Moth Player has tried to feed a media file to an audio element and encountered a problem. Check if the media file exists in the given location.

This occurence also triggers an error message. If in Supplied Mode, there may be more formats to try, in which case Moth Player moves on to the next. If any format is successful, the player will load and we'll never see the error message. In Free Mode, this is a fatal error.

file.ext: metadata has been loaded. Moth Player has fed the audio file to an audio element and the browser was able to find the file and load its metadata (for audio, the track duration.)

Choosing file extension "ext". After all audio types have been tested (and if at least one seemed OK) Moth Player will choose the first of the successful ones, minding the order in the supplied property.

All tracks for Player audio_id seem ready.: Moth Player has finished testing all the files in the playlist and is ready to build the player.

Error Messages

While Moth Player checks if the audio files are ready, the player doesn't show on the screen; instead, there is a placeholder for error messages.

Loading player... This is the default state at the beginning, when Moth Player hasn't finished testing the audio files and nothing went wrong (yet.)

You may see this for a few moments before the player appears (it may take a while if there are a lot of files to check), which means that everything worked as it should, or you may be stuck with this message forever, which means that some unforeseen error took place. See if the JavaScript Console offers some clue.

File type "ext" unsupported by Moth Player. Pruning from array. Moth Player has failed to match a file type listed in the supplied property against an internal list of supported file types (see Free Mode vs. Supplied Mode.)

Moth Player keeps trying formats until they run out; if a later format succeeds and the player loads, we may never see this error.

File type "ext" unsupported by the browser. Pruning from array. Moth Player has asked the browser if it can play the media type in the supplied property and the browser said no.

Moth Player keeps trying formats until they run out; if a later format succeeds and the player loads, we may never see this error.

All supplied file types failed. Either Moth Player failed to match all supplied formats against the internal list of accepted file types, or the browser has rejected all MIME types, or a combination of both. This is a fatal error. We need to convert our files to a supported audio format.

Player audio_id: file.ext could NOT be loaded. Moth Player tries to load each audio file and check if it can be played by an audio element. During this process, one audio file may not be loaded due to an error, in which case this message pops up, pointing to the offending file.

In Supplied mode, there may be more file types to try and Moth Player will keep at it until one succeeds or they all fail. In Free Mode, this is a fatal error and execution halts.

If the player doesn't load and you see the error messages:

 

Final words

I'd like to thank you for trying Moth Player. I hope that it proves useful (or fun) to you.

If you find this document confusing or in dire need of improvement, feel free to share your thoughts with me via email and I'll do my best to address your concerns.

Bug reports are welcome (you'd be doing me a huge favor.)

If you'd like to contribute to Moth Player (code optimization, skins, anything that comes to mind) I'll be very surprised. In a good way. We can talk about it.

Moth Player is licensed under the MIT license.

Cheers.

References

Cross-browser audio basics, at developer.mozilla.org.

HTML5 Audio Player w/ Responsive Playlist, at github. The original article by John Hall "How to Create a Playlist for HTML5 Audio" (link) is now defunct and only accesible through the wayback machine.

jPlayer, The jQuery HTML5 Audio / Video Library.

Footnotes

1 If you're not familiar with JavaScript, be advised that the punctuation in the script (commas, quotation marks, colons, braces, etc.) must be exact. ↩
2 Technically, an empty mp_plist object is created by the library. Here we're adding properties to it. ↩
3 If we just supply one format —say, mp3— the list will indeed be short and won't need a comma within the quotation marks. ↩
4 Moth Player will try formats one by one following the sequence defined in the supplied property. If a format is found wanting, a message will be logged in the console and the iteration will continue until Moth Player either finds a suitable format or runs out of formats to check. ↩
5 While intended for lyrics, we can put anything in the HTML element with the specified class name. When a track is active Moth Player reads the value of the property —e.g., "lyrics01"— and displays the HTML element with class="lyrics01". ↩