MP3 player using HTML5

MP3 player using HTML5
 
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (2 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


If you are only beginning to work with HTML5 and you strive for new knowledge - the following tutorial is what you need. Here, in a simple way we'll try our best to explain how to create your own HTML5 MP3 player. As a first lesson, let's start with HTML5 audio element. The HTML5 audio element is the essential part of the new media API. The element itself allows you to play several types of audio files and has a built-in easy-to-use interface, it allows the user to control audio playback. First let's create a very basic HTML document that can play audio files.

Before we get started, let's make a short revision of the tools needed to create and test the actual file. Here's what you'll need:

  • text editor;
  • one or two web browsers;
  • MP3 file (choose wisely).

If you've never done anything closely resembling this type of coding before, don't worry. We will go through the basics of each point in the above list.

Text editor: similar to word processor but with one important difference. Word processor embeds the control codes in the text then they are used by the word processor to render the document. Text editor does nothing extra to the text so in some sense it can be called "pure text". And we need pure text because the browser requires text to be free of control codes. Use any available text editor. If you use PC, you may try Notepad++ or EditPad (both will do). Windows default text editor - Notepad is OK too, but, we recommend against using it (as you may get extra blank lines). For Macs, you can try to use the free version of Komodo editor, find it on Komodo's web site: www.activestate.com. In this tutorial, we decided in favor of Sublime editor - it's popular and fairly new.

In general, there is no substantial difference between the editors, so find the one that fits your needs and go for it!

Web browser (two, or more): I'm confident about one thing, if you're reading this, you already have an installed web browser. I recommend for this purpose to use at least two or three web browsers. For the moment being, different browsers are implementing HTML5 with different levels of compliance to the standard. This means there are minor differences between how something works in Safari, IE, Firefox, Chrome and other web browsers.

MP3 file: I'm sure, if your aim is to play some audio, you'll need some audio to be played. Choose an ear-friendly sound or song, because while going through the first part of this tutorial you'll be repeatedly subjected to the same tune. I prefer Sting.

When all the necessary elements are present, it's the right time to start writing some code. Below are the steps needed to create your first beloved MP3 player:

1. Run the text editor you have chosen.

2. Start typing the code below. It's called the "Basic Document Structure". The author of this article prefers to white HTML code using this structure. Think of it as a skeleton or frame of an HTML file. In the example the HTML5 version of this structure is used. You might notice some minor variations of the code in other tutorials - but they have the same purpose.

<!DOCTYPE html>
<html>
  <head>
    <title>Audio Player</title>
  </head>
  <body>

  </body>
</html>

3. Save the file either on the desktop or your favorite folder created for these purposes. When you have saved the file append the extension .html or .htm. These extensions tell browsers that the file you have just created is an HTML file and can be read by the browser itself. In the example it is stored as audioPlayer1.html.

Save As audioPlayer1.html

4. The basic document structure, by itself, does only one thing and that is it gives us a place to put our content. At this point you are ready to insert your audio tag and try out the music player. So, copy your MP3 into the same folder as the HTML doc you have saved in the previous step.

5. Now place your mouse cursor between the open and closing tags of the body. The opening body tag looks like this: <body>. Before the closing body tag there is a forward slash, this is how it looks like: </body>. See in the text below:

Basic Document Structure

6. Input the following code where you've just clicked with the cursor. Pay attention to the passage that says music.mp3 in its place you should type the file name of the MP3 music file you moved in step four.

<audio controls="controls">
  <source src="music.mp3" type="audio/mpeg">
</audio>

7. Save your file again. Get ready to try out the version of an MP3 player you created. In order to open the file in your native browser, navigate to it and use the power of double-click. You may find it more satisfying to open the file from non-default browser by using open command and navigate to the HTML file you have just created.

If your MP3 player is not to working - don't worry! There's probably a good reason. And it's not your incompetence.

While HTML5 version gives the browsers an option to play audio (and video) files, not every browser plays all audio formats. You probably know the popular audio formats such as MP3 (used in this example), AIFF and WAV. But you are likely to be ignorant about format like - Ogg Vorbis.

Look at the table below to learn which audio formats can be read by different web browsers:

Browser

Ogg Vorbis

MP3

WAV

Firefox

+

 

+

Safari

 

+

+

Chrome

+

+

 

Internet Explorer

 

+

+

Based on the table above, if you want to play the MP3 file but attempt to run it in Firefox, you will fail. Usually, MP3 and Ogg Vorbis can be run by most of the major browser platforms. As an option - convert your audio file(s) to Ogg by using one of the free online converter programs. One simple converter can be found here: audio.online-convert.com.

Use Adobe's Soundbooth or Audacity to complete the conversion. Once the file is converted, you'll work with two separate audio files - MP3 and Ogg. (I'm not fond of WAV format due to its size, you can use a combination of WAV and Ogg Vorbis which can be played by the major browsers as well).

Next step - amend the source for the Ogg Vorbis file to your code. Change the audio element in your code in order for it to look this way:

<audio controls="controls">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
</audio>

Now, one more time run the code in the browser by double-clicking the icon for the HTML file. If more than one browser is installed on your device, you might try to run it on every browser then you'll see the slight differences. If you have at least MP3 and Ogg Vorbis formats covered, the music should play on every browser platform.

Here's how this functional player looks like in Chrome, Firefox and Safari (Mac version):

Chrome Audio Player

Chrome Audio Player

Audio Player in Firefox

Firefox Audio Player

Audio Player in Safari

Safari Audio Player

Most of this code is rather intuitive, and you can understand it simply by reading the tags.

In the audio tag itself, the controls modifier tells the browser to use the play, volume and song position slider shown in the images above. If the controls values are set to "false" or, altogether left out, the controls will simply not appear. By the way, technically speaking, modifiers which are placed in tags are also known as attributes (the same way as controls are placed in the audio tag).

So, now let's say couple of words about attributes. There are some other attributes used with audio tags in HTML5. These attributes influence other aspects of the audio player. I don't actually use these attributes very often and they're not necessary for this project. So if you are just curious about their existence, they are listed in this table:

Attribute

Purpose

src

As an alternative to using the <source> tag inside the <audio> element the src of the audio may be listed as an attribute of the audio tag. The value of the attribute is the URI of the audio file. Example:

<audio src="music.mp3" controls="controls">

preload

This attribute has three values: none, metadata and auto. If supported by the browser, the attribute will influence how the media should be preloaded to provide better user experience.

autoplay

If set to autoplay = "autoplay" the media will start playing as soon as the file loads. By the way Apple has disabled this bugging feature in iOS. Users generally find it annoying when media elements are played right after the page loads. Users prefer to have control over start and stop functions of media elements.

loop

If set to loop="loop" this attribute will cause the media file to start over and over again until otherwise commanded by the user.

Source: www.script-tutorials.com


 

Read also

HTML5: adding new elements

HTML5: adding new elements

HTML5: elements article and section

HTML5: elements article and section

Discussion (total 4 comments)

Dave H
July 19, 2013 at 09:14 am
I am attempting to create an embedded audio player that goes across browsers for a music blog. In Safari, everything works great. However, I cannot seem to get it functioning in Firefox & Chrome. Below is the code I am utilizing and I am publishing via Google's Blogger (not sure if that makes a difference). Any and all help is highly appreciated.
<audio controls="controls">
  <source src="https://sites.google.com/site/bbravoteeko/05.%20Sunday%20nite%5BB.Bravo%20Remix%5D.mp3?attredirects=0&d=1" type="audio/mpeg">
  <source src="https://sites.google.com/site/bbravoteeko/Sundanite.ogg?attredirects=0&d=1" type="audio/ogg">
</audio>
Administrator User
Administrator User
July 20, 2013 at 01:06 pm
Hello, I used your code and made simple HTML file. It worked in Mozilla and Chrome. I could listen to the music. I think, something is wrong with your browsers, try to update them or try to run it on another computer. I used Windows 7 for testing.
wonderwhy-er
July 25, 2013 at 03:02 am
Actually Firefox added support for mp3 files.
You can read it here https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats
Depending on your OS mp3 support was added somewhere in 20-22 version.
But I guess there could be platforms where its not supported, like linux.
Spark_PC
January 02, 2014 at 10:18 pm
Excellent

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation