Home | Work & Business | Computer Hardware | Media Players | How to Build a Web MP3 Player

How to Build a Web MP3 Player

by Joe Rivers
  • Overview

    The Internet is a great place to share and receive media. The .mp3 is one of the most ubiquitous digital formats and is used by many pieces of software and many devices. You can also use MP3s and HTML to create a web MP3 player, which visitors can access. Setting it up requires only a basic knowledge of HTML.
    Put a web MP3 player on your site.
    a1933b61-7897-0acb-799c-65fd9a3324a1314383
 
  • Step 1

    Open the webpage or HTML file that you wish to include your web MP3 player in.
  • Step 2

    Decide where you want the MP3 player to be. Once you have decided, type out <embed src="song.mp3" width="300" height="42"></embed>. Replace "song.mp3" with the file name of the .mp3 file you wish to play. The width and height settings can be changed as well, though the current settings represent an average size.
  • Step 3

    Decide how you want your MP3 player to behave. As it is, it will play automatically and will loop. You can change many of these assets by typing them after the final quotation mark after the song name and before the last ">." For example, typing autostart="false" will require the user to press play before the song will initiate. Other settings include looping and background colors. An example setup could look like: <embed src="anywhere.mp3" autostart="false" loop="false" width="300" height="42" controller="true" bgcolor="#FF9900"></embed> This code would not start right away, would not loop, would have standard controls and would have the background color of red.
  • Step 4

    Save the file or changes you made to your webpage.
  • 2
  • If you wish, you can also do this using the HTML5 standard. In HTML5, audio has its own element, which allows for greater control and performance. To implement it, you will need to change your doctype to "<!DOCTYPE HTML>." The actual code looks like this: <audio src="song.mp3" controls="controls"></audio>. Keep in mind that this method will work only in newer browsers, such as Firefox, Chrome or Safari.
  • If you wish, you can also do this using the HTML5 standard. In HTML5, audio has its own element, which allows for greater control and performance. To implement it, you will need to change your doctype to "<!DOCTYPE HTML>." The actual code looks like this: <audio src="song.mp3" controls="controls"></audio>. Keep in mind that this method will work only in newer browsers, such as Firefox, Chrome or Safari.

References & Resources