制作一个简单的音乐（JQuery）

使用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>

就这样简单的音乐就·做完了，你可以试着搜索自己喜欢的音乐并且播放起来

 点击一下就可以播放了。

 如果你闲的时间可以装饰下。