Как я могу l oop через аудио массив и играть в теге fa fa - PullRequest
Новая
       38

Как я могу l oop через аудио массив и играть в теге fa fa

0 голосов
/ 29 апреля 2020

У меня есть фрагмент кода 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 строк кода. Я попытался l oop в l oop, но это не сработало. Эта опция работает: 

       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 песни = новый массив (.. sr ​​c); Затем к l oop через 'document.querySelectorAll(.song) и встраиваем song[i].play();

Дело в том, что у меня большой список песен из списка!

1 Ответ

0 голосов
/ 29 апреля 2020

Вы можете проверить мое решение. Для работы с этим решением вам нужно добавить 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">&#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>
...