如何循环播放音频数组并在 fa fa 标签中播放

Question

我有一段 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">&#xf144;</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">&#xf144;</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">&#xf144;</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();

关键是我有一个很大的歌曲列表栏！

Answer 1

你可以查看我的解决方案。 要使用此解决方案，您需要在icon中添加song name为 class。

您的图标 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">&#xf144:</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">&#xf144:</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">&#xf144;</i></td> </tr> <tr> </body> </html>

如何循环播放音频数组并在 fa fa 标签中播放

问题描述

1 个解决方案

解决方案1
0 2020-04-28 22:56:18

如何循环播放音频数组并在 fa fa 标签中播放

问题描述

1 个解决方案

解决方案1 0 2020-04-28 22:56:18

解决方案1
0 2020-04-28 22:56:18