jqueryでオーディオエレメントを動的に追加します

Question

他のデータはiTunesのRSSフィードからプルされた各曲のオーディオ要素を追加しようとしていますので、他のデータはすべて曲に動的に追加します。

$.get('https://itunes.apple.com/' + countryCode + '/rss/topsongs/limit=3/xml', function(data){ 
 
       
 

 

 
       var songArray =$(data).find('entry'); 
 

 
       songArray.each(function(){ 
 

 
        var title= $(this).find("title").text(); //grab song title 
 
        var artist= $(this).find("im\\:artist, artist").text(); //grab artist namee 
 
        var album =$(this).find("im\\:name,name").text(); //grab album name 
 
        var image=$(this).find("im\\:image,image").eq(2).text(); //grab image link 
 
        var audioLink=$(this).find("link").eq(1).attr("href"); //grab music file 
 
        var audio= document.createElement('AUDIO'); 
 
         var source= document.createElement('source'); 
 
        audioLink= '"'+ audioLink + '"' 
 
        $('source').attr('src', audioLink); 
 
        $('audio').attr('controls','controls'); 
 
        $('source').attr('type', 'audio/mpeg'); 
 
        
 
    
 

 
      
 
        
 

 
         // youtube api 
 
        // Handle the search button's click event 
 
         //took the code from the previous assingmet for the youtube api 
 
          
 
          // Set the search term 
 
          var searchTerm = title; 
 
          
 
          var link; 
 
         
 
          
 
          var url = "https://www.googleapis.com/youtube/v3/search?q=" 
 
          + searchTerm + "&part=snippet&maxResults=1&key=AIzaSyBvccDrp39n-InLrjDvv4PH_vfNbN0J_iE"; 
 
         
 
          $.getJSON(url, function(data){ 
 
          
 
          var id = data.items[0].id.videoId; 
 
         
 
          link = "https://www.youtube.com/watch?v=" + id; 
 
           
 
            
 
           $("#song").append(
 

 

 
>where i added all the data to be appended to a div on the html   
 
          " <br><br>Song :" + title + "<br> Artist :" + artist + " <br>album: " + album + "<br>" + "<img src=" + image + "> " + "<a href= " + link + ">" + link + "</a> <br>" +audio 
 

 
            
 
        ); 
 

 
          }); 
 
       

Answer 1

  var audioLink=$(this).find("link").eq(1).attr("href"); //grab music file 
      var audio= document.createElement('AUDIO'); 
       var source= document.createElement('source'); 
      audioLink= '"'+ audioLink + '"' 
      $('source').attr('src', audioLink); //nothing found! source has not been appended to document 
      $('audio').attr('controls','controls');//nothing found! audiohas not been appended to document 
      $('source').attr('type', 'audio/mpeg'); 

このコードそれらを見つける傾けるjqueryのように、オーディオソースの要素が文書に添付されていないので、何もしません。

var audio= document.createElement('AUDIO'); 
audio.setAttribute('controls', true); 
var source = document.createElement('source'); 
source.src = audioLink; 

audio.appendChild(source) 

：

より良いような何かを試してみてください