所以这是我第一次使用JavaScript，我遇到了一些播放器的BUG。除了一些CSS的问题，目前只有两个东西不能用。首先，也是这个帖子的主要问题是，当我更换歌曲时，播放暂停按钮没有重置。要播放下一首歌曲，我必须双击，暂停回到播放，播放回到暂停（然后开始歌曲）也是自动播放下一首歌曲功能不工作，我猜测这与此有关？
第二个小问题是曲目名称不能改变。你能看到的曲目的HTML行是
<div class="song-title">Track1</div>
const background = document.querySelector('#background');
const thumbnail = document.querySelector('#thumbnail');
const song = document.querySelector('#song');
const songArtist = document.querySelector('.song-artist');
const songTitle = document.querySelector('.song-title');
const progressBar = document.querySelector('#progress-bar');
let pPause = document.querySelector('#play-pause');
songIndex = 0;
songs = ['/music/track1.mp3', '/music/track2.mp3', '/music/track3.mp3', '/music/track4.mp3', '/music/track5.mp3', '/music/track6.mp3', '/music/track7.mp3'];
thumbnails = ['/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', '/images/J&G Logo.png', ];
songArtists = ['Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT', 'Jelly & The GOAT',];
songTitles = ["Track1", "Track2", "Track3", "Track4", "Track5", "Track6", "Track7"];
let playing = true;
function playPause() {
if (playing) {
const song = document.querySelector('#song'),
thumbnail = document.querySelector('#thumbnail');
pPause.src = "/images/pause-icon.png"
thumbnail.style.transform = "scale(1.15)";
song.play();
playing = false;
} else {
pPause.src = "/images/play-icon.png"
thumbnail.style.transform = "scale(1)";
song.pause();
playing = true;
}
}
song.addEventListener('ended', function(){
nextSong();
});
function nextSong() {
songIndex++;
if (songIndex === songs.length) {
songIndex = 0;
};
song.src = songs[songIndex];
thumbnail.src = thumbnails[songIndex];
background.src = thumbnails[songIndex];
songArtist.innerHTML = songArtists[songIndex];
songTitle.innerHTML = songTitles[songIndex];
playing = true;
playPause();
}
function previousSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
};
song.src = songs[songIndex];
thumbnail.src = thumbnails[songIndex];
background.src = thumbnails[songIndex];
songArtist.innerHTML = songArtists[songIndex];
songTitle.innerHTML = songTitles[songIndex];
playing = true;
playPause();
}
function updateProgressValue() {
progressBar.max = song.duration;
progressBar.value = song.currentTime;
document.querySelector('.currentTime').innerHTML = (formatTime(Math.floor(song.currentTime)));
if (document.querySelector('.durationTime').innerHTML === "NaN:NaN") {
document.querySelector('.durationTime').innerHTML = "0:00";
} else {
document.querySelector('.durationTime').innerHTML = (formatTime(Math.floor(song.duration)));
}
};
function formatTime(seconds) {
let min = Math.floor((seconds / 60));
let sec = Math.floor(seconds - (min * 60));
if (sec < 10){
sec = `0${sec}`;
};
return `${min}:${sec}`;
};
setInterval (updateProgressValue, 500);
function changeProgressBar() {
song.currentTime = progressBar.value;
};需要HTML的请告诉我。只是说明一下，图标切换正常。谢谢你的帮助，任何解释都将是非常感激的:) !
术语 媒体标签 是对 <audio> 和 <video> 标签。
OP没有任何 事件监听者 或 事件属性 所以可以肯定的是，有 事件属性:
<button onclick='lame()' type='button'>Click Me I'm Lame</button>
不要使用它们，它们很烂。而是使用。
<button type='button'>Click Me</button>
const btn = document.queryselector('button');
btn.addEventListener('click', clickHandler);
/* OR */
btn.onclick = clickHandler;
有一个布尔值叫 isPlaying. 有两个问题:
它不应该是 true 最初。常识告诉我们 song 页面加载后就不播放了（如果播放了，为了用户体验，重新考虑一下）。
不使用标志，而是使用媒体属性，返回一个关于媒体标签状态的布尔值（即 song): song.paused, song.ended和 song.playing.
第一个 if 条件的 nextSong() 是错误的。
if (songIndex === songs.length) {...
songs.length 是7。somgIndex 范围是0-6。所以应该是 songs.length -1
没有包括 <progress> 标签和它的处理程序，看起来它被正确复制了......差不多。这看起来好像是后来添加的。
setInterval (updateProgressValue, 500);
function changeProgressBar() {
song.currentTime = progressBar.value;
};
setInterval() 是一个可怜的替代品 "timeupdate" 事件。一个媒体标签会触发一个 "timeupedate" 在玩的时候，每隔250毫秒。使用属性 song.currentTime 和 song.duration 来监控播放过程中的耗时。
changeProgressBar() 看起来毫无用处。已经有一个叫做 updateProgressValue(). 在唯一的一行中 changeProgressBar() 的其中一句话的反面版本。updateProgressValue():
song.currentTime = progressBar.value;
progressBar.value = song.currentTime;
术语 表格控制 是对 <input>, <output>, <textarea>, <button>, <select>, <fieldset>和 <object> 标签。 术语 祖先牌 是在DOM树上共享同一分支的标签的术语，该分支的级别高于 目标 -- 开发者打算将事件触发的行为注入祖先标签的子孙标签的术语。
如果你的布局有多个表单控件，请将所有的东西都包在一个 <form> 标签。这样做可以让您使用 HTMLFormElement 界面 和 HTMLFormControlsCollection API. 语法简洁，简化了对表单控件的访问。
<form id='main'>
<fieldset name='set'>
<input>
<button type='button'>
[type='button'] is needed when nested within a <form>...
</button>
<button>
...otherwise it is a [type='submit'] by default.
</button>
</fieldset>
<fieldset name='set'>
<input id='input1'>
<input id='input2'>
</fieldset>
</form>
<script>
/*
- Referencing the <form> by #ID
- Or bracket notation document.forms['main'];
- Or by index document.forms[0];
*/
const main = document.forms.main;
/*
- Once the <form> is referenced -- use the `.elements` property to collect
all of its form controls into a **HTMLCollection** (Use an short and easy
to remember identifier to reference it).
*/
const ui = main.elements;
/*
- <form> tags and form controls can be referenced by [name] attribute as
well. Keep in mind that if there is more than one tag with the same
[name] -- then they will be collected into a **HTMLCollection**.
- Note: There is another fieldset[name=set] -- so in this situation you can
access them both: `sets[0]` and `sets[1]`
*/
const sets = ui.set;
/*
- To reference a form control without a #ID or [name], its index is always
available. There's an archaic way as well: `const input = ui.item(1)`
- There's no need to reference the second <button> because its a
[type='submit'] tag. They have default behavior built-in: *Sends data to
server* and *Resets the <form>*
*/
const input = ui[1];
const button = ui[2];
/*
- Of the many ways to reference a form control -- #ID is the easiest.
*/
const i1 = ui.input1;
const i2 = ui.input2;
</script>
事件委托 是一种编程模式，它利用了 事件起泡 这样我们...
...不仅可以监听未知的、无限数量的标签上的触发事件--我们还可以监听页面加载后动态创建的标签的触发事件。
此外，监听事件只需要一个所有目标标签共同的祖先标签，(window, document和 body 总是可用的，但只有在没有其他标签更接近所有目标的情况下才能使用）。)
document.forms[0].onclick = controlPlayer;
的 事件处理程序 功能 必须通过 事件对象 以致于 .target 属性可用于确定与用户交互的实际标签（在本例中是点击了什么）。
function controlPlayer(event) {
const clicked = event.target;
...
一旦确定了这一点，我们就可以进一步缩小可能性。这样做可以让我们通过显式排除我们不需要处理的标签。
if (event.target.matches('[type=button]')) {...
改变标签的外观以表示状态，可以通过切换 .classes 具有其所代表的国家所特有的风格。通常的做法是使用 伪元素 ::before 和 ::after
const thumb = document.querySelector('.thumb');
const song = document.querySelector('#song');
const form = document.forms.ui;
const ui = form.elements;
const artist = ui.artist;
const title = ui.title;
const play = ui.playBack;
const prev = ui.prev;
const next = ui.next;
const base = 'https://glpjt.s3.amazonaws.com/so/av';
const songs = ['/mp3/righteous.mp3', '/mp3/jerky.mp3', '/mp3/nosegoblin.mp3', '/mp3/balls.mp3', '/mp3/behave.mp3'];
const thumbs = ['/img/link.gif', '/img/sol.png', '/img/ren.gif', '/img/balls.gif', '/img/austin.gif'];
const artists = ['Samuel L. Jackson', 'Sol Rosenberg', 'Ren', 'Al Pachino', 'Mike Myers'];
const titles = ["Righteous", "Whatnot", "Magic Nose Goblins", "Balls", "Behave"];
let index = 0;
let quantity = songs.length;
const playMP3 = () => {
play.classList.remove('play');
play.classList.add('pause');
song.play();
}
const pauseMP3 = () => {
play.classList.remove('pause');
play.classList.add('play');
song.pause();
}
form.onclick = controlPlayer;
song.onended = function(event) {
pauseMP3();
index++;
if (index > quantity - 1) {
index = 0;
}
song.src = base + songs[index];
thumb.src = base + thumbs[index];
artist.value = artists[index];
title.value = titles[index];
playMP3();
}
function init() {
song.src = base + songs[0];
thumb.src = base + thumbs[0];
artist.value = artists[0];
title.value = titles[0];
song.load();
}
function controlPlayer(event) {
const clicked = event.target;
if (clicked.matches('#playBack')) {
if (song.paused || song.ended) {
playMP3();
} else {
pauseMP3();
}
}
if (clicked.matches('#prev')) {
pauseMP3();
index--;
if (index < 0) {
index = quantity - 1;
}
song.src = base + songs[index];
thumb.src = base + thumbs[index];
artist.value = artists[index];
title.value = titles[index];
playMP3();
}
if (clicked.matches('#next')) {
pauseMP3();
index++;
if (index > quantity - 1) {
index = 0;
}
song.src = base + songs[index];
thumb.src = base + thumbs[index];
artist.value = artists[index];
title.value = titles[index];
playMP3();
}
}
init();:root,
body {
font: 700 small-caps 2.5vw/1.5 Verdana;
}
b {
display: inline-block;
width: 6ch;
color: white;
}
output {
color: gold;
text-shadow: 0 0 5px red;
}
button {
display: inline-block;
width: 3vw;
height: 11.25vw;
line-height: 11.25vw;
border: 0;
font: inherit;
font-size: 3rem;
vertical-align: middle;
color: lime;
background: none;
cursor: pointer;
}
button:hover {
color: cyan;
}
#playBack.play::before {
content: '\0025b6';
}
#playBack.pause {
height: 5.625vw;
line-height: 5.625vw;
}
#playBack.pause::before {
content: '\00258e\a0\00258e';
height: 5.625vw;
line-height: 5.625vw;
font-size: 2rem;
vertical-align: top;
}
#prev::before {
content: '\0023ee';
height: 5vw;
line-height: 5vw;
font-size: 3.25rem;
vertical-align: top;
}
#next,
#prev {
height: 5vw;
line-height: 5vw;
}
#next::before {
content: '\0023ed';
height: 5vw;
line-height: 5vw;
font-size: 3.25rem;
vertical-align: top;
}
figure {
position: relative;
min-height: 150px;
margin: 0px auto;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: max-content;
padding: 3px 5px;
font-size: 1.2rem;
}
figcaption label {
background: rgba(0, 0, 0, 0.4);
}
.thumb {
display: block;
max-width: 100%;
height: auto;
margin: 5px auto;
object-fit: contain;
}
.controls {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
height: 6vw;
}<main>
<form id='ui'>
<audio id='song'></audio>
<fieldset>
<figure>
<img class='thumb'>
<figcaption>
<label>
<b>Artist:</b> <output id='artist'></output>
</label>
<label><br>
<b>Title:</b> <output id='title'></output>
</label>
</figcaption>
</figure>
<fieldset class='controls'>
<button id='prev' type='button'></button>
<button id='playBack' class='play' type='button'></button>
<button id='next' type='button'></button>
</fieldset>
</fieldset>
</form>
</main>