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>

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

1 个答案: