javascript - 如何循环播放音频数组并在 fa fa 标签中播放
问题描述
我有一段html代码:
<tr>
<th scope="row">1</th>
<td>Didn't love</td>
<td>4:18</td>
<td><i style="font-size:24px" class="fa love"></i></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Keys</td>
<td>3:51</td>
<td><i style="font-size:24px" class="fa keys"></i></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Smoking</td>
<td>5:12</td>
<td><i style="font-size:24px" class="fa smoking"></i></td>
</tr>
<tr>
我需要播放每一首独特的歌曲,但使用循环,避免这么多 JS 代码行。我尝试了循环循环,但没有奏效。此选项有效:
let songKeys = new Audio();
songKeys.src = 'audio/keys.mp3';
let songLove = new Audio();
songLove.src = 'audio/love.mp3';
let songSmoking = new Audio();
songSmoking.src = 'audio/smoking.mp3';
let keys = document.querySelector('.keys');
keys.addEventListener('click', function(){
if (songKeys.paused) {
songKeys.play();
} else {
songKeys.pause();
}
});
let love = document.querySelector('.love');
love.addEventListener('click', function(){
if (songLove.paused) {
songLove.play();
} else {
songLove.pause();
}
});
let smoking = document.querySelector('.smoking');
smoking.addEventListener('click', function(){
if (songSmoking.paused) {
songSmoking.play();
} else {
songSmoking.pause();
}
我试图创建 var song = new Array(.. src); 然后循环'document.querySelectorAll(.song)
并嵌入song[i].play();
关键是我有一个很大的歌曲列表栏!
解决方案
你可以查看我的解决方案。要使用此解决方案,您需要song name
在icon
.
您的图标 className 应如下所示:class="fa your_song_name"
console.clear();
const songIcons = document.querySelectorAll('i.fa');
songIcons.forEach(songIcon => {
songIcon.addEventListener('click', (e) => {
const icon = e.currentTarget;
const songName = icon.classList[1];
let song = new Audio();
song.src = `audio/${songName}.mp3`;
song.paused ? song.play() : song.pause();
// the selected Song
console.log(song);
})
})
i {
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<tr>
<th scope="row">1</th>
<td>Didn't love</td>
<td>4:18</td>
<td><i style="font-size:24px" class="fa love"></i></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Keys</td>
<td>3:51</td>
<td><i style="font-size:24px" class="fa keys"></i></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Smoking</td>
<td>5:12</td>
<td><i style="font-size:24px" class="fa smoking"></i></td>
</tr>
<tr>
</body>
</html>
推荐阅读
- javascript - 无法从 redux 接收反应组件中的状态
- grep - 为什么 `grep -v` 不反转匹配?
- assembly - vzeroall 零是否将 ymm16 注册到 ymm31?
- php - 路线 - Laravel 不加载半页
- simulink - Simulink 计数开关频率?
- javascript - 如何检查添加的课程是否有视频然后播放
- java - jaxws 和 apache cxf 和 glassfish 5 错误:java.lang.IllegalStateException:生命周期方法 [finalizeConfig] 不得抛出已检查异常
- swift - 使用大引号时,将字符串 JSON 转换为 Swift 中的字典
- kotlin - 使用 Kotlin Native,构建 Windows exe,我可以将库 (dll) 捆绑到 exe 中吗?
- laravel - 更新期间的 Laravel 错误 - 未定义的变量:id