一個多按鈕 javascript function

Question

foreach 從數據庫中獲取歌曲每個音頻都有按鈕來暫停和播放所有歌曲的所有按鈕僅適用於第一首歌曲...當我按下第二首或第三首歌曲的按鈕時第一次運行...任何解決方案？

刀片.php

    @foreach($songs as $song)
    <audio  class="player" id="player"  src="{{asset('audios/'.$song->song)}}" type="audio/ogg" > 
   </audio>
        <div class="player-control">
            <button id="{{$song->id}}" class="playerbutton play btn btn-outline-info" 
    onclick="playmusic(this)" ><i class="fas fa-play"></i></button>
    <button id="pause" class="playerbutton pause btn btn-outline-info" 
    onclick="pausemusic(this)"><i class="fas fa-pause"></i></button>
        </div>
        @endforeach

js.文件

var player=document.getElementById("player");
  function playmusic()
  {
    
    player.play();

  }
  function pausemusic(elem)
  {
    player.pause();
    
  }

Answer 1

使用var player=document.getElementById("player"); 你 select 只有一個音頻元件。 如果您向按鈕和音頻標簽添加唯一的歌曲 ID，如下所示：

@foreach($songs as $song)
<audio  class="player" id="player-{{$song->id}}" ... </audio>
<div class="player-control">
    <button data-song-id="{{$song->id}}" ... onclick="playmusic(this)" >...</button>
    <button data-song-id="{{$song->id}}" ... onclick="pausemusic(this)">...</button>
</div>
@endforeach

然后你可以 select 直接在 function 里面綁定一個音頻元素：

  function playmusic(e)
  {
    var songId = e.dataset.songId,
     player = document.getElementById("player-" + songId);
     player.play();
  }
  function pausemusic(e)
  {
    var songId = e.dataset.songId,
     player = document.getElementById("player-" + songId);
    player.pause();
  }