How to create an audio player using html and javascript

Question

I am trying to create an audio player using html and javascript, no jquery. I've got a selection of albums that need to return the songs from the album. I will then select a song and it will play. This is my code so far. I know it's extremely messy, I'm just a beginner so do forgive.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="music.js"></script>
    <style type="text/css"></style>
</head>    
<body>

    <table width="400" height="400" border="1" style="display: inline-block;">
    <caption>Albums</caption>
<tr>
    <td><p>Please select an album from the list
<select name='Album'>
<option>Birdsong Small Birds</option>
<option>Birdsong Large Birds</option>
<option>Birdsong Medium Birds</option>
<option>Birdsong Finches</option>
<option>Birdsong Tits</option>
</select>
</select>
</td>
</tr>
</table>


<table width="400" height="400" border="1" style="display: inline-block;">
<caption>Songs</caption>
<tr>
    <td>a</td>
</tr>
</table>


<table width="400" height="400" border="1" style="display: inline-block;">
<caption>
Selected Songs
</caption>
<tr>
<td>a</td>
</tr>
</table>
</body>
</html>

So when I select an album in the first table the selection of songs I have will appear in the second table. Then when I select a song in the second table it will play in the last table

This is an example of what my final piece should look like
Example
I have a music.js file in the format:

var albums= [ { "title":"Birdsong Small Birds", "artist":"BBC", "artwork":"Wren", "tracks":[ {"title":"Dunnock","mp3":"Birdsong-Dunnock.mp3", "lyrics":"The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"},

This is a small piece as it contains all the album folders with each song.

I created sample (drafted in codepin.io). codepen.io/anon/pen/rxNXdd It may help. Just ask if you need more explanation. — Maxali
Thank you for your help. I have made edits to the bottom of my post to give you a better understanding. I still don't understand how to get a drop down list of songs from the album I would have selected. Sorry to be a nuisance. Also where would I place the javascript code within my HTML code? — Riley Anderson

Maxali Maxali · Accepted Answer · 2015-12-07T09:49:46

I changed the codepin sample. You can check a working sample in this pin link to codepin.io

I changed your HTML code for album and songs auto render.

Added <audio> tag to play our mp3s. Removed <select> options to populate by code.

Here is the code

UPDATED

var albums = [{
    "title": "Birdsong Small Birds",
    "artist": "BBC",
    "artwork": "Wren",
    "tracks": [{
      "title": "Dunnock",
      "mp3": "Birdsong-Dunnock.mp3",
      "lyrics": "The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"
    }, {
      "title": "Another Dunnock",
      "mp3": "http://www.noiseaddicts.com/samples_1w72b820/272.mp3",
      "lyrics": "The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"
    }, {
      "title": "Third Dunnock",
      "mp3": "Third-Dunnock.mp3",
      "lyrics": "The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"
    }]
  },
  {
    "title": "Second Birdsong Birds",
    "artist": "BBC",
    "artwork": "Wren",
    "tracks": [{
      "title": "Dunnock in Second",
      "mp3": "Birdsong-Dunnock.mp3",
      "lyrics": "The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"
    }, {
      "title": "Another Dunnock  in Second",
      "mp3": "http://www.noiseaddicts.com/samples_1w72b820/272.mp3",
      "lyrics": "The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"
    }, {
      "title": "Third Dunnock  in Second",
      "mp3": "Third-Dunnock.mp3",
      "lyrics": "The Dunnock or hedge sparrow has a fast warbling song often delivered from the top of a hedge or bush"
    }]
  }
];

//add onchange event
var albumElement = document.getElementById('album-select');
albumElement.addEventListener('change', function() {
  // populate songs for selected album
  populateSongs(albumElement.value)
});

// fill Albums from database (albums JSON obj)
for (var i = 0; albums.length; i++) {
  var option = document.createElement("option");
  option.text = albums[i].title;
  albumElement.add(option)
}

function populateSongs(album) {
  var songsTable = document.getElementById('songs-table');

  //delete old songs
  while (songsTable.rows.length > 0) {
    songsTable.deleteRow(0);
  }


  //populate songs in table
  // loop through albums
  for (var i = 0; albums.length; i++) {

    //check selected album
    if (albums[i].title == album) {

      //found album: loop through tracks 
      for (var track = 0; albums[i].tracks.length; track++) {
        //add new <td> and <td>
        var row = songsTable.insertRow(track);
        var cell = row.insertCell(0);

        cell.innerHTML = albums[i].tracks[track].title;

        // add attribute to <td> for mp3 file.
        // we need mp3, title and album onClick
        // creates something like: 
        //         <td title="Song title" album="Album title" file="file.mp3"
        //            Song title
        //         </td>

        cell.setAttribute("title", albums[i].tracks[track].title);
        cell.setAttribute("album", albums[i].title);
        cell.setAttribute("file", albums[i].tracks[track].mp3);


        // add click event
        cell.addEventListener('click', function() {
          // pass clicked <td>
          // this <td> has all data 
          play(this);
        });

      }
    }
  }

  // Add some text to the new cells:


}

function play(element) {
  // retrieve passed data from element attributes
  var songTitle = element.getAttribute('title');
  var albumTitle = element.getAttribute('album');
  var songFile = element.getAttribute('file');

  document.getElementById('audio-player').src = songFile;
  document.getElementById('song-album').innerHTML = albumTitle;
  document.getElementById('song-title').innerHTML = songTitle;

  console.log(song);

}

<html>

<head>

  <style type="text/css"></style>
</head>

<body>

  <table width="400" border="1" style="display: inline-block;">
    <caption>Albums</caption>
    <tr>
      <td>
        <p>Please select an album from the list</p>
        <select id="album-select" name='Album'>
          <option></option>
        </select>
    </tr>
  </table>


  <table id="songs-table" width="400" border="1" style="display: inline-block;">
    <caption>Songs</caption>
    <tr>
      <td></td>
    </tr>
  </table>


  <table width="400" border="1" style="display: inline-block;">
    <caption>
      Selected Songs
    </caption>
    <tr>
      <td>
        <h3 id="song-album">Choosen Album </h3>
        <h4 id="song-title">Song 1</h4>
        <!-- play() adds src attribute -->
        <audio id="audio-player" autoplay controls title="TJs PL">
    Your browser does not support the audio tag.
  </audio>
      </td>
    </tr>
  </table>
</body>

</html>

How to create an audio player using html and javascript

1 Answers