我正试图通过点击按钮来交换2首歌曲。我可以通过更改src成功交换歌曲,但是当我使用和if else声明控件“闪烁”时,这意味着我必须在if else语句中有一个bug。
HTML
<div id = "audioplayer">
<p id="songname">Listen to Sisyphus by Have A Nice Life</p>
<audio id = "song"
controls
src="Untitled/10%20Sisyphus.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</div>
<button onclick="myFunction()">Click to change songs</button>
JS:
function myFunction() {
if(document.getElementById("song").src === "Untitled/10%20Sisyphus.mp3") {
document.getElementById("songname").innerHTML = "listening to track03.mp3";
document.getElementById("song").src = "test.mp3";
}
else{
document.getElementById("songname").innerHTML = "Listen to Sisyphus by Have A Nice Life";
document.getElementById("song").src = "Untitled/10%20Sisyphus.mp3";
}
}
虽然您可以使用相对路径设置.src
(比如"Untitled/10%20Sisyphus.mp"
),但访问.src
属性将为您提供完整路径:
const song = document.getElementById("song");
song.src = "test.mp3";
console.log(song.src);
<audio id="song" controls src="Untitled/10%20Sisyphus.mp3"></audio>
因此,您只需要用完整路径替换测试,例如:
function myFunction() {
if (document.getElementById("song").src === "https://example.com/Untitled/10%20Sisyphus.mp3") {
// ...
实时片段(工作HTML,但没有实际声音):
function myFunction() {
const song = document.getElementById("song");
const songname = document.getElementById("songname");
if (song.src === "https://stacksnippets.net/Untitled/10%20Sisyphus.mp3") {
songname.innerHTML = "listening to track03.mp3";
song.src = "test.mp3";
} else {
songname.innerHTML = "Listen to Sisyphus by Have A Nice Life";
song.src = "Untitled/10%20Sisyphus.mp3";
}
}
<div id="audioplayer">
<p id="songname">Listen to Sisyphus by Have A Nice Life</p>
<audio id="song" controls src="Untitled/10%20Sisyphus.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</div>
<button onclick="myFunction()">Click to change songs</button>