Question

所以尝试为每首歌曲添加音频元素来自itunes rss feed。所有其他数据填充很好但是在尝试为每首歌曲动态添加音频元素时遇到严重问题。

 $.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)

使用jquery动态添加音频元素

1 个答案: