フリー音源を制作してインターネット上でダウンロード出来る様にするために、インターネット上のヒントを元にして下記の様なJSONPを使うソースにしたのですが、上手く動作しません。
本当は「画像→曲名→音声の操作→歌詞、コメントなどのテキストファイルリンク」の順番で曲ごとに並ぶはずですが、下記の画像の様に表示されません。
正常な表示として、YouTubeの検索結果のページをイメージして頂ければいいと思います。
フリーレンタルサーバを使うので、別のドメインからデータを取得する必要があるので、JSONPを使おうと思いました。
よろしくお願いいたします。
![
HTML
1<!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="js/jquery-3.1.0.min.js"></script> 5 <script> 6$(function() { 7 $.ajax({ 8 url: http://xxxx.com/xxxxx/xxxx, 9 type:'GET', 10 dataType: 'jsonp', 11 }).done(function(data) { 12 var count = 0 ; 13 $(data.data).each (function() { 14 $("#data_list").append("<tr id=\"data_id" + count + "\"></tr><br>") ; 15 $("#data_id" + count).append("<td><img src=" + this.picURL + " width=100 height=100></td><br><br>") ; 16 $("#data_list #data_id" + count).append("<td><center>" + this.title + "</center></td><br><br>") ; 17 $("#data_list #data_id" + count).append("<td><audio src=" + this.mp3url + " controls></audio></td><br><br>") ; 18 $("#data_list #data_id" + count).append("<td><center><a href=" + this.kURL + ">歌詞</a></center></td>") ; 19 count++ ; 20 }); 21 }); 22}); 23 </script> 24 <title>TITLE</title> 25 </head> 26 <body> 27 <center> 28 <table> 29 <thead> 30 <tr> 31 <th width="100">画像</th> 32 <th width="400">曲名</th> 33 <th width="300">再生</th> 34 <th width="300">歌詞</th> 35 </tr> 36 </thead> 37 <tbody id="data_list"> 38 </tbody> 39 </table> 40 </center> 41 </body> 42</html>
JSON
1{ 2 "data": [ 3 { 4 "kURL": "http://xxxx.com/xxxxx/xxxx.txt", 5 "title": "TEST", 6 "mp3url": "http://xxxx.com/xxxxx/xxxx.mp3", 7 "picURL": "http://xxxx.com/xxxxx/xxxx.jpg" 8 } 9 ] 10}
回答4件
あなたの回答
tips
プレビュー