我正在尝试使用html和javascript创建一个音频播放器，没有jquery。我有一些需要从专辑中返回歌曲的专辑。然后我会选择一首歌然后播放。到目前为止这是我的代码。我知道它非常凌乱，我只是一个初学者，所以请原谅。
<!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>
因此，当我在第一张表格中选择一张专辑时，我所选歌曲将出现在第二张表格中。然后当我在第二张表中选择一首歌时，它将在最后一张表中播放
这是我最后一件应该是什么样子的一个例子
Example
我有一个music.js文件，格式为：
var albums = [{“title”：“Birdsong Small Birds”，“艺术家”：“BBC”， “艺术品”：“W”“，”曲目“：[ {“title”：“Dunnock”，“mp3”：“Birdsong-Dunnock.mp3”，“歌词”：“The Dunnock或对冲麻雀经常发出快速的鸣叫歌曲 树篱或灌木丛的顶部“}，
这是一小段，因为它包含每首歌曲的所有专辑文件夹。
答案 0 :(得分：1)
我更改了codepin样本。您可以在此pin link to codepin.io
我更改了自动渲染专辑和歌曲的HTML代码。
添加了<audio>标签来播放我们的mp3。已移除<select> option以按代码填充。
这是代码
<强>已更新
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>