I was asked by a visitor who had read How to Play Music or Audio on a Website with HTML and wondered, "Instead of having 3 separate players on my site, do you have code that will give me 1 player with multiple songs?" He wanted to provide his visitors with an option to play whichever piece of music they felt like without having to deposit multiple audio players on his page, one per song.
(Incidentally, this article is relevant regardless of the type of audio your files contain. That is, it will work even if your file contains your children's first words, or animal noises recorded on your farm, rather than music. I frequently mention "songs" or "music" below because that was the original question that was asked, but the code actually doesn't care what the audio file contains.)
This article assumes multiple things:
Since it deals with putting an audio player on a web page, you must already have a website. If this is not true, please read How to Create a Website first, and then return here when you have got a site running.
Although the code for the HTML audio player is included in this article for your convenience, if you need an explanation of how it works, please read How to Play Music or Audio on a Website with HTML (HTML5), since it is already addressed there. I will however explain the new code added in this article, namely the additional HTML and JavaScript for handling the selection of a song or audio clip from a list
You will need some knowledge of JavaScript and HTML to be able to adapt the code in this article for your site. I will try to minimize the amount of knowledge you need, but, unfortunately, there is no way to avoid this altogether. And you will definitely need to know how to insert HTML into a web page.
Since the audio player uses HTML 5, your page should be in that version of HTML. The rest of your site can remain in HTML 4.01 or XHTML 1.0 or whatever; it's only the page containing the player that should be in HTML 5.
Like the original article, this is strictly a "how to" tutorial. It does not deal with copyright issues. For the latter, see Is It Legal to Use Any Piece of Music, Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters.
Notice that I have studiously avoided using the word "playlist", since that was not what my visitor asked for, even though he wanted a list of files from which his users could select one to play. As is commonly used today, a "playlist" refers to a list of songs (or whatever) that will be played one after the other. If there is any interest for that, I will address it in a separate article, since it will require different code.
The code for the player is as follows.
The code cannot be used as-is, since I doubt that the clips you want to play are those that simply say the names of my websites. A description of the things that you will need to modify follows the demo.
The above code, when put on a web page, produces the following.
The list of files and their descriptions are placed in a <select> element, which
translates to a drop down list in a web browser.
Change the "value" attribute of each "<option" line, so that it points to
the URL (ie, web address) of your song or audio clip. You can use a relative URL (which is what I used)
or an absolute one (eg, 'value="https://www.example.com/my_audio_clip.mp3"'). Change also
the description (the bit that currently says things like "thesitewizard.com") between the
"<option>" "</option>" tags to describe the file. This description
contains the words that are actually displayed in the drop down list that your visitor sees.
If you only have 2 songs or clips, and want to remove one item from the list, delete one of
the "option" lines. Be sure to delete the entire line, from the opening "<option"
to the closing "</option> on that line.
For those who want to add more items to the list, copy and paste the following line for each item you want to add.
Then modify "filename.mp3" and "Description of file" as before.
Make sure you add the line (or lines, if you have many to add) immediately after the other
"option" lines and before the closing "</select>"
line.
If you are not familiar with HTML and/or JavaScript, don't change anything else. For example, don't modify
the id of "audio_list" and "audio_player", or the JavaScript function
name, otherwise if you do an incomplete job, your player will no longer work.
At present, when the user selects a new audio clip, it is not started until he/she clicks the Play button. If you want the clip to start playing when a new selection is made, add a new line to the JavaScript function just before the closing "}", containing:
In other words, the JavaScript function should now look like this:
Note that you will still need to copy and paste the rest of the HTML code from the earlier part of this article. I didn't duplicate it here since it is the same as before. (Or you can use the View Source facility in your web browser to view the HTML source code of this section of the article.)
When you are done, upload your page and the accompanying audio clips to the appropriate directories (ie, folders)
on your website, and test it in your browser. If the clips do not play, make sure that you have only modified
the things I said to modify. And, of course, verify that the names and locations of the files match those you
put in the option lines.
Copyright © 2021-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Play a Song (or Some Other Audio Clip) from a List on a Website
