使用JQuery製作一個簡單的音樂網站

不多廢話直接上程式碼

Html：

  <input type="text" id="name" value="" />
  <button id="MusicOnclik">搜尋</button>
 
  <div class="musicdiv">

</div>
<div class="playmusic">

</div>

Jquery：

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
 
"></script>
    <script>

        $(document).ready(function () {

            $("#MusicOnclik").click(function () {
                var values = $("#name").val();
                // alert(values);
                $.get("http://musicapi.xiecheng.live/search?keywords=" + values,
                    function (data, status) {
                        $(
 
".musicdiv").empty();
                        //  console.log(data);
                        var musicList = data.result.songs;
                        //  console.log(musicList);
                        for (var i = 0; i < musicList.length; i++) {
                            var songname = musicList[i].name;
                            
 
var songid = musicList[i].id;
                            $(".musicdiv").append("<h3 id='songid" + songid + "' data-id='" + songid + "'>" + songname + "</h3>" + "</br>");
                            $("#songid" + songid).on("click", function () {
                                //console.log(songid)
                                var id = $(this).data("id");
                                // console.log($(this).data("id"));
                                $.get("https://autumnfish.cn/song/url?id=" + id, (res) => {
                                    //  console.log(res)
                                    var musicurl = res.data[0].url;
                                   // window.open(res.data[0].url);//跳轉
                                    $(".playmusic").append("<audio controls='controls' height='100' width='180'>" +
                                        " <source src='" + musicurl + "' type='audio/mp3' />" + "" +
                                        " </audio>");

                                })
                            });
                            console.log($("#songid" + songid))

                            console.log($("#songid" + songid).data("id"))
                        };
                    });
            })
        })
    </script>

就這樣簡單的音樂就·做完了，你可以試著搜尋自己喜歡的音樂並且播放起來

點選一下就可以播放了。

如果你閒的時間可以裝飾下。