使用ajax在html中加载音频答案

【问题标题】：Load Audio in html with ajax使用ajax在html中加载音频
【发布时间】：2018-06-08 18:48:52
【问题描述】：

我有一个我想要的音乐列表当我单击带有 ajax 的打开媒体播放器的音乐图像时，我在 HTML 中使用此代码：

 <div class="container ">
     <div class="row center">
        @foreach($singles as $single)
           <div class="col-md-2 folio-thumb">
             <a href="#" data-value="http://media.w3.org/2010/07/bunny/04-
               Death_Becomes_Fur.oga"><img class="img-responsive"
                src={{asset($single->Single_Image)}} /></a>
                     <h6 style="color:white" id="music">
                      {{$single>Single_Name}}<a href="/"></a></h6>
           </div>
        @endforeach
      </div>
   </div>
   <audio id="audio" controls="controls" style="margin-left:150px;">
      <source id="audioSource" src="">
       Your browser does not support the audio format.
   </audio>

和 Ajax 代码：

$('.folio-thumb').click(function (e) {
    e.preventDefault();
     var elm = e.target;
      var audio = document.getElementById('audio');
        var source = document.getElementById('audioSource');
         source.src = elm.getAttribute('data-value');
          audio.load(); 
         audio.play(); 
   });

但我在控制台中给出了这个错误：

GET http://127.0.0.1:8000/null net::ERR_ABORTED home:288 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

【问题讨论】：

好的。因此，请求的播放被新的加载请求中断。有什么关系？
我的问题是无法播放音频

标签： javascript jquery ajax laravel

【解决方案1】：

您正在使用选择器 .folio-thumb 甚至是用于包装 <div> – <div class="col-md-2 folio-thumb"> 的类。结果 var source = document.getElementById('audioSource'); 返回 null。（div没有任何数据属性）。

您应该将选择器添加到 <a> 元素并在 JavaScript 中使用。

示例； <a class="play-button" href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">...</a>

$('.play-button').click(function (e) {
    e.preventDefault();
     var elm = e.target;
      var audio = document.getElementById('audio');
        var source = document.getElementById('audioSource');
         source.src = elm.getAttribute('data-value');
          audio.load(); 
         audio.play(); 
   });

https://jsbin.com/ceqotimuru/edit?html,js,output 的工作示例

最好的问候，利库

【讨论】：

检查我的工作示例。视频名称中有空格吗？例如名称中间的行更改？
我的脚本代码在<script> $(document).ready(function () { //My Code});之间这可能是问题吗？
不，这不会导致此问题。你得到什么错误？还是一样GET http://127.0.0.1:8000/null net::ERR_ABORTED？
是的，我收到此错误
您是否更新了 JavaScript 和 a 元素以具有相同的选择器？所以 a 有类，例如“播放按钮”和 javascript 使用 $('.play-button') 选择器？这两个必须匹配。

【解决方案2】：

我解决了我的问题

 @foreach($singles as $single)
       <div class="col-md-2 folio-thumb">
         <a href="#" data-value="http://media.w3.org/2010/07/bunny/04-
           Death_Becomes_Fur.oga"><img class="img-responsive"
            src={{asset($single->Single_Image)}} /></a>
                 <h6 style="color:white" id="music">
                  {{$single>Single_Name}}<a href="/"></a></h6>
       </div>
    @endforeach

在这段代码中，我将数据值添加到<a> 但<img> 标记为真

     <a href="#" ><img class="img-responsive"data-
            value="http://media.w3.org/2010/07/bunny/04-
           Death_Becomes_Fur.oga"
            src={{asset($single->Single_Image)}} /></a>

【讨论】：