我正在使用 javascript 而不是 jquery 在 HTML 中创建一个音频播放器。我这样做是为了让它像这样工作
我将第一个表格作为下拉列表，我将选择其中一张专辑，相应的歌曲将显示在下一个 Pane 中，这部分工作正常。我的问题是我不知道如何编码，以便当我在中间 Pane 中单击一首歌曲时，该歌曲将与相应的图像、专辑名称和歌曲名称一起显示在最后一个 Pane 中。
这是我的代码和我的 var albums 的简化版本。我也是初学者，如果代码困惑请见谅。
<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</p>
<select id="album-select" name='Album'>
<option></option>
</select>
</select>
</td>
</tr>
</table>
<table id="songs-table" width="400" height="400" border="1" style="display: inline-block;">
<caption>Songs</caption>
<tr>
</tr>
</table>
<table width="400" height="400" border="1" style="display: inline-block;">
<caption>
Selected Songs
</caption>
<tr>
<td>
<audio controls='controls'>
<source src='xxxxx.mp3' type='audio/mpeg'>
<source src='xxxxx.wav' type='audio/wav'>
Your browser does not support the audio element.
</audio>
</td>
</tr>
</table>
<script>
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":"Robin","mp3":"Birdsong-Robin.mp3",
"lyrics":"Unusually among British birds, both the male and the femaale robins sing"},
var albumElement = document.getElementById('album-select');
albumElement.addEventListener('change', function(){
populateSongs(albumElement.value)
});
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');
while(songsTable.rows.length > 0) {
songsTable.deleteRow(0);
}
for(var i=0;albums.length;i++){
if(albums[i].title == album) {
for(var track=0;albums[i].tracks.length;track++) {
var row = songsTable.insertRow(track);
var cell = row.insertCell(0);
cell.innerHTML = albums[i].tracks[track].title;
cell.setAttribute("file",albums[i].tracks[track].mp3);
cell.addEventListener('click',function(){
play(this.getAttribute('file'));
});
}
}
}
}
function play(song) {
var audioElement = document.getElementById('audio-player');
audioElement.src = song;
console.log(song);
}
</script>
</body>
</html>
如有任何帮助，我们将不胜感激。
最佳答案
首先:
- 您的 HTML 结构糟糕且不正确
- 不要编写内联 css
- 尝试理解您编写的代码
我没有太多时间审查所有代码。希望对你有帮助。一些代码行已被注释，如果有什么不清楚的地方就问。
您将需要某种类型的本地服务器，因为您不能对本地文件使用 xhr 请求。
如果您安装了 python，则可以从项目的根目录使用 python -m SimpleHTTPServer 3001，然后导航到 127.0.0.1:3001(或本地主机)。或者您可以使用 Brackets 编辑器的实时预览，它会为您创建本地服务器。
或者，如果您不想运行本地服务器，您可以使用 Mozilla Firefox 浏览器。
我将结构更改为:
|css
|--样式.css
|数据
|--专辑.json
|js
|--脚本.js
index.html
这是您的代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS audio player</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<table>
<thead>
<tr>
<td>Albums</td>
</tr>
</thead>
<tbody>
<tr>
<td>Please select an album from the list:</td>
</tr>
<tr>
<td>
<select id="album-select" name='Album'>
<option></option>
</select>
</td>
</tr>
</tbody>
</table>
<table id="songs-table">
<thead>
<tr>
<td>Songs</td>
</tr>
</thead>
</table>
<table id="selected-songs">
<thead>
<tr>
<td>Selected Songs</td>
</tr>
</thead>
<tbody>
<tr class="title">
<td></td>
</tr>
<tr class="lyrics">
<td></td>
</tr>
<tr>
<td>
<audio id="player" controls='controls'>
<source src=''>
</audio>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
样式.css
body {
width: 1024px;
height: 100%;
margin: 0 auto;
}
table {
float: left;
width: 33%;
}
thead tr td {
padding: 10px;
background-color: lightslategray;
color: #fff;
text-align: center;
}
tbody:before {
content: '-';
display: block;
line-height: 20px;
color: transparent;
}
#songs-table tbody tr {
cursor: pointer;
}
#songs-table tbody tr:hover {
background-color: lightgray;
}
albums.json
[
{
"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"
}
]
}
]
script.js
window.onload = function () {
'use strict';
// Make xhr request to get JSON file
function getAlbums() {
var xhttp = new XMLHttpRequest();
// Detect when response is ready
xhttp.onreadystatechange = function () {
if (xhttp.readyState === 4 && xhttp.status === 200) {
// Parse our response, so we can use it as object
buildHTML(JSON.parse(xhttp.responseText));
}
};
// Send request
xhttp.open('GET', './data/albums.json', true);
xhttp.send();
}
// Build page when request comes
function buildHTML(albums) {
var albumElement = document.getElementById('album-select'),
len = albums.length,
option,
i;
for (i = 0; i < len; i++) {
option = document.createElement('option');
option.innerHTML = albums[i].title;
albumElement.add(option);
}
albumElement.addEventListener('change', function () {
var self = this; // Reference self
albums.forEach(function (album) {
if (album.title === self.value) {
// Pass album object
populateSongs(album);
}
});
});
}
function populateSongs(album) {
var songsTable = document.getElementById('songs-table'),
tbody = document.createElement('tbody'),
row,
cell;
// Add row for each track
(album.tracks).forEach(function (track) {
row = tbody.insertRow(0);
cell = row.insertCell(0);
cell.innerHTML = track.title;
cell.addEventListener('click', function () {
if (this.innerHTML === track.title) {
playSong(track);
}
});
});
// Remove tbody if exist
Object.keys(songsTable.children).forEach(function (key) {
if (songsTable.children[key].nodeName === 'TBODY') {
songsTable.removeChild(songsTable.children[key]);
}
});
songsTable.appendChild(tbody); // Add new tbody
}
function playSong(track) {
var player = document.getElementById('player'),
selectedSongs = document.getElementById('selected-songs'),
tbody = selectedSongs.children[1],
title = tbody.children[0].children[0],
lyrics = tbody.children[1].children[0];
title.innerHTML = track.title;
title.style.fontWeight = 'bold';
lyrics.innerHTML = track.lyrics;
// Play song
player.src = track.mp3;
player.play();
}
getAlbums();
};
关于javascript - HTML 和 javascript 音频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34167683/