我正在尝试使用 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", "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"},
这是一小块，因为它包含每首歌曲的所有专辑文件夹。
最佳答案
我更改了 codepin样本。您可以在此 pin 中查看工作示例link to codepin.io
我更改了专辑和歌曲自动呈现的 HTML 代码。
已添加 <audio>标签来播放我们的 mp3。已删除 <select> option s 按代码填充。
这是代码
已更新
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>关于javascript - 如何使用 html 和 javascript 创建音频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34124154/