网络应用开发课程作业 part1

最新推荐文章于 2024-10-11 17:39:47 发布

多啦努力学编程

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量45

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52635961/article/details/130978043

版权

该文章演示了如何通过jQuery的Ajax方法调用网易云API来获取歌词和音乐URL。首先，它展示了一个简单的Ajax请求示例，用于获取歌词并显示在网页上。接着，文章解释了如何在用户点击按钮时，获取歌曲ID并利用该ID从API获取音乐链接，从而更新HTML中的音频源进行播放。

摘要由CSDN通过智能技术生成

引用jquery

<script src="jquery.min.js"></script>

利用jquery使用ajax

$.ajax({
          type: "GET",
          url: "https://autumnfish.cn/",
          data: {
            keywords: "青花瓷",
            limit: 1,
            type: "1006",
          },
          success: function (result) {
            console.log(result);
            console.log("success!");
          },
          failure: function (result) {
            alert("Failed!");
          },
          complete: function (result) {
            console.log("complete!");
          },
        });

调用网易云api 并获取歌词字段

 $(".bn").click(function () {
        $.ajax({
          type: "GET",
          url: "https://autumnfish.cn/search",
          // dataType: JSON,
          data: {
            keywords: "青花瓷",
            limit: 1,
            type: "1006",
          },
          success: function (result) {
            console.log(result);
            var x = Object.values(result);
            var lyTxt = x[0].songs[0].lyrics.txt;
            console.log(lyTxt);
            $(".content").text(lyTxt);
            console.log("success!");
          },
          failure: function (result) {
            alert("Failed!");
          },
          complete: function (result) {
            console.log("complete!");
          },
        });
      });
    </script>

利用js在网页中播放音频

<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

https://www.cnblogs.com/coderwcb/p/16090563.html

调用网易云api 并获取音乐id

html部分代码

 <div class="song">
      <div class="name">a beautiful song ~</div>
      <div class="id">0000</div>
      <audio class="au" src="#" controls="controls">
        Your browser does not support the audio element.
      </audio>
      <button class="bn2">press2</button>
    </div>

js部分代码


      $(".bn2").click(function () {
        var getId = $(".id").text();
        $.ajax({
          type: "GET",
          url: "https://autumnfish.cn//song/url",
          data: {
            id: 1985364667,
          },
          success: function (result) {
            console.log(result);
            var x = Object.values(result);
            var y = x[0];
            console.log(y[0].url);
            $(".au").attr("src", y[0].url);
            console.log("success!");
          },
          failure: function (result) {
            alert("Failed!");
          },
          complete: function (result) {
            console.log("complete!");
          },
        });
      });