1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 10 <script> 11 $(function(){ 12 //从 url中 获取 id 13 var id; 14 var reg = new RegExp("(^|&)id=([^&]*)(&|$)"); 15 var r = window.location.search.substr(1).match(reg); 16 if(r&&r.length>2){ 17 id = unescape(r[2]); 18 } 19 console.log(id); 20 21 //获取歌曲信息ID 22 var data = getSongInfo(id); 23 24 25 //获取歌曲信息 26 function getSongInfo(id){ 27 $.ajax({ 28 url:"http://www.andyan.cn/hiphop/hiphop/getSong", 29 dataType:"json", 30 type:"post", 31 data:{ 32 id:id, 33 songName: "songName", 34 author: "author", 35 lyric: "lyric", 36 audioFilePath:"" //歌曲保存的路径 37 }, 38 success:function(data){ 39 console.log(JSON.stringify(data)); 40 console.log(data); 41 console.log(data.data.lyric) 42 43 //歌词 44 var lyricHtml = ""; 45 var str = data.data.lyric.replace(/n/g, ""); 46 console.log(str) 47 var strNew = str.replace(/\/g, " "); 48 console.log(strNew) 49 var arr = strNew.split(" "); 50 console.log(arr); 51 52 $("#tickerContainer").append(`<audio id="music" class="audio" src="${data.data.audioFilePath}">你的浏览器不支持audio标签。</audio>`) 53 var tickerHtml = '' 54 for(var i = 0; i<arr.length; i++){ 55 var item = arr[i]; 56 console.log(item); 57 tickerHtml += `<li>${item}</li>` 58 } 59 60 61 document.querySelector('#ticker').innerHTML = tickerHtml; 62 63 //作者 64 var authorHtml = ""; 65 authorHtml = `<li>歌曲名称</li> 66 <li>${data.data.songName}</li> 67 <li>作词</li> 68 <li>${data.data.author}</li> 69 <li>作曲</li> 70 <li>${data.data.author}</li>` 71 document.querySelector('.authorName').innerHTML = authorHtml; 72 73 return data; 74 } 75 76 77 }) 78 } 79 }) 80 81 82 </script> 83 84 85 </html>