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>