How to Play a Song (or Some Other Audio Clip) from a List on a Website

Play a File from a List of Songs, Music or Other Audio Files


How to Play a Song (or Some Other Audio Clip) from a List on a Website

by Christopher Heng, thesitewizard.com

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.)

Preamble

This article assumes multiple things:

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.

An Audio Player Where You Can Select Which Song to Play

The code for the player is as follows.

<script>
function change_audio_file()
{
  var file_list = document.getElementById('audio_list') ;
  var file_to_play = file_list.options[ file_list.selectedIndex ].value ;
  var player = document.getElementById('audio_player');
  player.src = file_to_play ;
}
</script>
<form>
<label for="audio_list">
Select an audio clip to load into the player. Then click the Play button on the player to start it.
</label>
<select onchange="change_audio_file();" id="audio_list">
<option selected value="audio/demo.mp3">thesitewizard.com</option>
<option value="audio/thefreecountry.mp3">thefreecountry.com</option>
<option value="audio/howtohaven.mp3">howtohaven.com</option>
</select>
</form>
<div id="audio_container">
<audio controls id="audio_player" src="audio/demo.mp3">
<div style="border: 1px solid black ; padding: 8px ;">
Sorry, your browser does not support this audio player.
</div>
</audio>
</div>

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. Please read on for the things you will need to modify.

To see how the above code works, go to the demo page for this article. Note that the actual demo has some additional code to add a bit of space so that the drop down list is not too close to the player. The example code in this section only has the relevant code that you will need for your page, and not the extra space. If you really want to see my demo code, just use your browser's View Source facility on the demo page. I removed the irrelevant spaces (technically, paragraph tags), since you will probably want to design your page differently, and I didn't want to confuse you by putting non-essential code here.

How to Adapt the Code

The list of files and their descriptions are placed in a <select> element, which translates to a drop down list in a web browser (see the demo if you have not already done so).

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.

You can also modify the words "Select an audio clip to load into the player [etc]" so that it says something more relevant to your page.

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.

<option value="filename.mp3">Description of file</option>

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.

How to Make the Player Start the Selected New Song Immediately

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:

player.play() ;

In other words, the JavaScript function should now look like this:

<script>
function change_audio_file()
{
  var file_list = document.getElementById('audio_list') ;
  var file_to_play = file_list.options[ file_list.selectedIndex ].value ;
  var player = document.getElementById('audio_player');
  player.src = file_to_play ;
  player.play() ;
}
</script>

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.

Test the Results

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 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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Play a Song (or Some Other Audio Clip) from a List on a Website





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.