[英]multi buttons on one javascript function
foreach fetch songs from database each audio have button to pause and play all buttons of all songs works with first song only... when i press button of second or third song the first run... any solution? foreach 从数据库中获取歌曲每个音频都有按钮来暂停和播放所有歌曲的所有按钮仅适用于第一首歌曲...当我按下第二首或第三首歌曲的按钮时第一次运行...任何解决方案?
blade.php刀片.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.file js.文件
var player=document.getElementById("player");
function playmusic()
{
player.play();
}
function pausemusic(elem)
{
player.pause();
}
With var player=document.getElementById("player");
使用
var player=document.getElementById("player");
you select only one audio element.你 select 只有一个音频元件。 If you add a unique song id to the buttons and audio tag like this:
如果您向按钮和音频标签添加唯一的歌曲 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
Then you may select a bound audio element directly inside the function:然后你可以 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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.