使用ajax在html中加载音频

Question

我有一个我想要的音乐列表当我点击音乐图像打开带有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.

Answer 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的工作实例

最好的问候，Riku

Answer 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>标签是True

     <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>