javascript - 使用按钮在歌曲之间切换
问题描述
我正在尝试通过单击按钮在 2 首歌曲之间切换。我只需更改 src 就可以成功交换歌曲一次,但是当我使用 and if else 语句时,控件“闪烁”,这意味着我的 if else 语句中必须有一个错误。
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
使用相对路径(如 to "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>
推荐阅读
- python - 如果字符串中存在子字符串并与不区分大小写的python匹配,则返回子字符串
- python - 嵌套for循环仅在Python中网格的第一行上运行
- android - 在 Android 12 上应多久更新一次大致位置
- python-3.x - 如何从列中提取与列表匹配的单词?
- javascript - 新实例字段语法
- c# - C# 正则表达式 - 似乎无法始终如一地工作
- angular - Zuul 没有路由到 Angular 资源
- postgresql-13 - 删除记录,忽略外键违规导致的失败
- python - 计算 numpy 数组和 csr_matrix 之间的成对最小值的最有效方法
- python - 如何对多个数组执行带有if条件的追加