Unable to assign audio source to source tag in response of ajax request

Question

I am sending ajax request to db and getting audio link in response link is accurate in variable but not binding in source tag.

here is code of html which i am using to play audio

function play(){
   
       }

<button id="play_btn" onclick="play()" class="playing"></button>
   <audio id="myAudio" >
    <source src="" id="audio_source" type="audio/mpeg">
   </audio>

this is the function to get and assign audio link

 $('#cmbSura').change(getSurah);
     function getAudio(){
     
       $.ajax({
         url:'Temp_url',
               type: 'post',
               data: {
                 "_token": "toker generate",
                 "audio_id" : 12,
                     },
                      beforeSend: function(){
                          document.getElementById("wait").style.display = "block";
                         },
                         complete: function(){
                            
                         },
                         success: function (response) 
                         {
                          document.getElementById("wait").style.display = "none";
   link = "temp_url/audios/"+item.link_to_audio;
                  alert(link);
     $("audio #audio_source").attr('src',"'"+link+"'");   
                         }
                       });
      
     }

<button id="play_btn" onclick="getAudio()" class="playing"></button>
                              <audio id="myAudio" >
                                <source src="" id="audio_source" type="audio/mpeg">
                               </audio>

what's the `dataType` expected here ? In other words what's the type of the data that the server will reply with ? Is it `JSON` ? — ThS, Aug 17 '18 at 13:55
Not sure if usable here, but did you see this answer for changing audio tag sources? https://stackoverflow.com/questions/9421505/switch-audio-source-with-jquery-and-html5-audio-tag — justDan, Aug 17 '18 at 14:01
@BabarMalik give us the encoded `JSON` to check what are the fields, objects or arrays present in the `JSON` to see how we should handle the response in `JavaScript`. — ThS, Aug 17 '18 at 14:13

score 0 · Answer 1 · answered Aug 17 '18 at 14:07

Try this: I'm not sure about the response type, but from your coding I think it should be JSON, so I'll treat it JSON.

 $('#cmbSura').change(getSurah);
     function getAudio(){
     
       $.ajax({
         url:'Temp_url',
         dataType: 'json',
               type: 'post',
               data: {
                 "_token": "toker generate",
                 "audio_id" : 12,
                     },
                      beforeSend: function(){
                          document.getElementById("wait").style.display = "block";
                         },
                         complete: function(){
                            
                         },
                         success: function (item) 
                         {
                          document.getElementById("wait").style.display = "none";
   var link = "temp_url/audios/"+item.link_to_audio;
                  alert(link);
     $("audio #audio_source").attr('src', link);   
                         }
                       });
      
     }

<button id="play_btn" onclick="getAudio()" class="playing"></button>
                              <audio id="myAudio" >
                                <source src="" id="audio_source" type="audio/mpeg">
                               </audio>

Copy it to your text editor and change the _token with the appropriate one and also don't forget to include jQuery

Unable to assign audio source to source tag in response of ajax request

1 Answers1