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

mvpbest 2021-10-08 原文

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