如何使用音频标签并从数据库播放源答案

【问题标题】：How to Use audio tag and play source from database如何使用音频标签并从数据库播放源
【发布时间】：2017-06-30 15:43:06
【问题描述】：

我发现这个可以使用，但是我怎样才能使 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>

【问题讨论】：

音频文件是如何存储在数据库中的？您需要找到一种方法将它们作为来自服务器的有效二进制文件提供服务——这似乎是您在编写任何 JS 代码之前需要解决的问题。
音频文件被存储为字符串并移动到一个文件夹中。我遇到的问题是音频ID。即使我点击其他人，也只有第一首音乐播放。@RoryMcCrossan
所以你有多个audio 元素具有相同的id？如果是这样，那是你的问题。您能否编辑您的问题以显示一个 HTML 示例，其中包含多个 audio 和 a 元素的代码组织方式
即使我尝试用数据库中每个音乐文件的各种唯一 ID 替换音频{{$ebeat->title}} @RoryMcCrossan
您如何定位togglePlay() 函数中的音频元素？

标签： javascript jquery laravel

【解决方案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>

【讨论】：

它可以工作，但前一个并没有停止，而下一个播放它们都在播放，而我希望前一个停止播放 onchange @Rory McCrossan
stackoverflow.com/questions/15930328/…
谢谢@Rory McCrossan 但是我该如何实现这个 $('audio').each(function(){ this.pause(); // 停止播放 this.currentTime = 0; // 重置时间 }）;以我目前的情况 $(function() { $('a.togglePlay').click(function(e) { var audio = $(this).prev()[0]; return audio.paused ? audio. play() : audio.pause(); }); });