用酷狗音樂API打造一流在線音樂體驗

一、概述

隨著互聯網的發展，人們對於在線音樂的要求越來越高，如何使用API打造一流的在線音樂體驗，是每個開發者需要思考的問題。

酷狗音樂API是目前比較熱門的API之一，提供了豐富多樣的音樂資源，開發者可以通過接入酷狗音樂API，實現在線音樂播放、搜索、歌詞展示、MV播放等功能。

本文將介紹如何使用酷狗音樂API，以及如何結合前端技術，打造一流的在線音樂體驗。

二、介面說明

酷狗音樂API提供了豐富的介面，可以通過以下介面獲取不同的音樂資源：

• 搜索歌曲介面：http://songsearch.kugou.com/song_search_v2
• 獲取歌曲詳細信息介面：http://wwwapi.kugou.com/yy/index.php
• 獲取歌曲播放地址介面：http://wwwapi.kugou.com/yy/index.php
• 獲取歌詞介面：http://lyrics.kugou.com/search
• 獲取MV播放地址介面：http://m.kugou.com/mvweb/html/index_XXXX.html，其中XXXX為MV的ID

通過這些介面，我們可以獲取到酷狗音樂的歌曲、歌詞、MV等豐富信息。

三、音樂搜索功能

在實現在線音樂播放前，我們需要先實現音樂搜索功能，方便用戶搜索到自己想聽的歌曲。

//搜索歌曲
function searchMusic(keyword) {
  var url = "http://songsearch.kugou.com/song_search_v2?keyword=" + keyword + "&page=1&pagesize=10&platform=WebFilter";
  $.ajax({
    type: "GET",
    url: url,
    success: function(res) {
      var data = JSON.parse(res)["data"]["lists"];
      for (var i = 0; i < data.length; i++) {
        var name = data[i]["SongName"];
        var singer = data[i]["SingerName"];
        var album = data[i]["AlbumName"];
        var songId = data[i]["FileHash"];
        //在頁面上顯示搜索結果
        displaySearchResult(name, singer, album, songId);
      }
    },
    error: function(err) {
      console.log(err);
    }
  });
}

以上是搜索歌曲的核心代碼，我們通過調用搜索歌曲介面，獲取到搜索結果，並通過displaySearchResult()函數，在頁面上展示搜索結果。

四、播放音樂功能

有了搜索結果，我們就可以開始播放音樂了。播放音樂需要以下步驟：

• 獲取歌曲詳細信息（包括歌曲名、歌手名、專輯名、封面等）
• 獲取歌曲播放地址
• 使用音樂插件（如jPlayer）播放音樂

//獲取歌曲詳細信息
function getSongInfo(songId) {
  var url = "http://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash=" + songId;
  $.ajax({
    type: "GET",
    url: url,
    success: function(res) {
      var data = JSON.parse(res)["data"];
      var songName = data["song_name"];
      var singerName = data["author_name"];
      var albumName = data["album_name"];
      var imgUrl = data["img"];
      var audioUrl = data["play_url"];
      //在頁面上顯示音樂信息
      displaySongInfo(songName, singerName, albumName, imgUrl);
      //播放音樂
      playMusic(audioUrl);
    },
    error: function(err) {
      console.log(err);
    }
  });
}

//使用jPlayer播放音樂
function playMusic(audioUrl) {
  $("#jquery_jplayer_1").jPlayer({
    ready: function() {
      $(this).jPlayer("setMedia", {
        mp3: audioUrl
      }).jPlayer("play");
    },
    swfPath: "/js",
    supplied: "mp3",
    wmode: "window"
  });
}

以上是播放音樂的核心代碼，我們通過調用獲取歌曲詳細信息介面和獲取歌曲播放地址介面，獲取到音樂的詳細信息和播放地址，並使用jPlayer插件播放音樂。

五、歌詞展示功能

有了歌曲的播放，我們還可以將歌詞展示在頁面上，方便用戶跟唱。

//獲取歌詞
function getLyrics(songId) {
  var url = "http://lyrics.kugou.com/search?ver=1&man=yes&client=pc&keyword=" + songId + "&hash=" + songId;
  $.ajax({
    type: "GET",
    url: url,
    success: function(res) {
      var data = JSON.parse(res)["candidates"][0];
      var lyricsUrl = data["accesskey"];
      //獲取歌詞內容
      $.ajax({
        type: "GET",
        url: lyricsUrl,
        success: function(res) {
          var lyrics = res.replace(/\[[^\]]+\]/g, "");
          displayLyrics(lyrics);
        },
        error: function(err) {
          console.log(err);
        }
      })
    },
    error: function(err) {
      console.log(err);
    }
  })
}

//在頁面上顯示歌詞
function displayLyrics(lyrics) {
  $("#lyric-container").html("");
  var lines = lyrics.split("\n");
  for (var i = 0; i < lines.length; i++) {
    $("#lyric-container").append("
" + lines[i] + "
");
  }
}

以上是歌詞展示的核心代碼，我們通過調用獲取歌詞介面，獲取到歌詞的地址，並在頁面上展示歌詞內容。

六、MV播放功能

除了音樂播放和歌詞展示，我們還可以通過酷狗音樂API獲取到MV播放地址，並在頁面上播放MV。

//獲取MV播放地址
function getMVUrl(mvId) {
  var url = "http://m.kugou.com/mvweb/html/index_" + mvId + ".html";
  $.ajax({
    type: "GET",
    url: url,
    success: function(res) {
      var videoUrl = $(res).find("video").attr("src");
      //在頁面上播放MV
      playMV(videoUrl);
    },
    error: function(err) {
      console.log(err);
    }
  });
}

//使用video.js播放MV
function playMV(videoUrl) {
  videojs("#mv-player", {
    controls: true,
    sources: [{
      "type": "video/mp4",
      "src": videoUrl
    }]
  });
}

以上是MV播放的核心代碼，我們通過調用獲取MV播放地址介面，獲取到MV的地址，並使用video.js插件播放MV。

有了以上的代碼支持，我們就可以使用酷狗音樂API打造一流的在線音樂體驗了！