如何使用音频标签和播放数据库中的源

Question

我发现可以使用它，但是我如何使id与数据库中的每个音乐查询保持一致

var myAudio = document.getElementById("myfile");
function togglePlay() {
return myAudio.paused ? myAudio.play() : myAudio.pause();
};

<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a onClick="togglePlay()">{{$ebeat->title}}</a>

Answer 1

鉴于您在整个 DOM 中重复同一对元素，使代码通用会更有意义。为此，请使用 DOM 遍历将以前的同级元素audio元素获取到单击的a元素。为此，您可以使用引用所单击元素previousSibling：

function togglePlay(el) {
var audio = this.previousSibling;
return audio.paused ? audio.play() : audio.pause();
};

<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a onClick="togglePlay(this)">{{$ebeat->title}}</a>

或者，当您使用 jQuery 标记问题时，您可以使用prev()，如下所示：

$(function() {
$('a.togglePlay').click(function(e) {
var audio = $(this).prev()[0];
return audio.paused ? audio.play() : audio.pause();
});
});

<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a href="#" class="togglePlay">{{$ebeat->title}}</a>