使用Ajax在HTML中加载音频

I have a list of music I want When I click image of music opened media player with ajax, I Use this code in 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>

And Ajax Code:

$('.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(); 
   });

But I Give this Error in console:

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.

You are using selector .folio-thumb even that class in for the wrapping <div> – <div class="col-md-2 folio-thumb">. Which results var source = document.getElementById('audioSource'); returning null. (The div does not have any data attributes).

You should add selector to the <a> element and use that in the JavaScript.

Example; <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(); 
   });

Working example at https://jsbin.com/ceqotimuru/edit?html,js,output

Best regards, Riku

I Solved My problem

 @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

in this code I add data-value to <a> But <img> tag is 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>