jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

下面我将详细讲解如何使用jQuery+JSON+jPlayer实现QQ空间音乐查询功能的完整攻略。步骤如下：

一、了解所需技术及工具

jQuery：一款流行的JavaScript库，可以大大简化JavaScript编程。
jPlayer：一款基于jQuery的HTML5音频播放器插件，可以播放不同格式的音频文件。
JSON：JavaScript对象表示法，一种轻量级的数据交换格式，用于通过网络传输数据。

二、准备工作

获取QQ音乐URL：访问QQ音乐官网，搜索到需要的音乐，复制该音乐的播放链接URL。
获取QQ音乐API：在浏览器中打开QQ音乐的播放链接URL，右键查看源代码，搜索“_PLAYLIST”关键字，可以找到该音乐对应的API地址，将该地址复制下来备用。

三、编写HTML代码

在HTML文件中，我们需要引入jQuery和jPlayer的相关文件，并创建一个播放器的div元素，如下：

<!DOCTYPE html>
<html>
<head>
    <title>QQ音乐查询示例</title>
    <meta charset="utf-8">
    <script src="jquery.min.js"></script>
    <script src="jplayer.min.js"></script>
</head>
<body>
    <div id="jquery_jplayer"></div>
</body>
</html>

四、编写JavaScript代码

我们需要先将获取到的API地址进行JSONP跨域请求，获取到音乐播放数据。具体代码如下：

$(document).ready(function(){
    var url = "http://c.y.qq.com/base/fcgi-bin/fcg_musicexpress.fcg?json=3&guid=126548448&g_tk=1975934232&loginUin=837330347&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0";
    $.ajax({
        type: "get",
        async: false,
        url: url,
        dataType: "jsonp",
        jsonp: "jsonpCallback",
        success: function(data) {
            var item = data.data.items[0];
            var guid = item.musicData.songmid;
            var api = "http://c.y.qq.com/v8/fcg-bin/fcg_play_single_song.fcg?songmid=" + guid + "&tpl=yqq_song_detail&format=jsonp&callback=getOneSongInfoCallback&g_tk=1030242199&jsonpCallback=getOneSongInfoCallback&loginUin=837330347&hostUin=0&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0";
            $.ajax({
                type: "get",
                async: false,
                url: api,
                dataType: "jsonp",
                jsonp: "jsonpCallback",
                success: function(data) {
                    var playUrl = data.url + "&guid=" + item.musicData.guid;
                    $("#jquery_jplayer").jPlayer({
                        ready: function () {
                            $(this).jPlayer("setMedia", {
                                title: item.musicData.songname,
                                m4a: playUrl,
                            });
                        },
                        swfPath: "JPlayer.swf",
                        supplied: "m4a",
                        wmode: "window",
                        volumn: 0.7,
                    });
                },
                error: function() {
                    alert("获取音乐数据失败！");
                }
            });
        },
        error: function() {
            alert("获取API数据失败！");
        }
    });
});

最终效果是，我们可以通过在HTML文件中添加一个按钮，点击该按钮可以触发JS代码，通过跨域请求获取到对应音乐的信息并播放出来。

五、示例说明

示例1：播放指定音乐

针对QQ音乐中的某首歌曲，我们可以获取该歌曲的播放链接URL，并在Javascript代码中将该URL解析为对应的API地址，实现播放该音乐的功能。

$(document).ready(function(){
    var playUrl = "http://ws.stream.qqmusic.qq.com/" + "123456.m4a";
    $("#jquery_jplayer").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "歌曲名",
                m4a: playUrl,
            });
        },
        swfPath: "JPlayer.swf",
        supplied: "m4a",
        wmode: "window",
        volumn: 0.7,
    });
});

示例2：根据关键字搜索音乐

我们也可以通过在html文件中添加一个搜索框，用户输入关键字后，通过JSONP请求查询对应音乐，并播放搜索结果中的第一首音乐。

$(document).ready(function(){
    $("#search-btn").click(function(){
        var keyword = $("#search-box").val();
        var url = "http://c.y.qq.com/soso/fcgi-bin/client_search_cp?jsonpCallback=callback&n=20&w=" + keyword + "&format=jsonp";
        $.ajax({
            type: "get",
            async: false,
            url: url,
            dataType: "jsonp",
            jsonpCallback: "callback",
            success: function(data) {
                var item = data.data.song.list[0];
                var guid = item.mid;
                var api = "http://c.y.qq.com/v8/fcg-bin/fcg_play_single_song.fcg?songmid=" + guid + "&tpl=yqq_song_detail&format=jsonp&callback=getOneSongInfoCallback&g_tk=1030242199&jsonpCallback=getOneSongInfoCallback&loginUin=837330347&hostUin=0&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0";
                $.ajax({
                    type: "get",
                    async: false,
                    url: api,
                    dataType: "jsonp",
                    jsonp: "jsonpCallback",
                    success: function(data) {
                        var playUrl = data.url + "&guid=" + item.guid;
                        $("#jquery_jplayer").jPlayer({
                            ready: function () {
                                $(this).jPlayer("setMedia", {
                                    title: item.songname,
                                    m4a: playUrl,
                                });
                            },
                            swfPath: "JPlayer.swf",
                            supplied: "m4a",
                            wmode: "window",
                            volumn: 0.7,
                        });
                    },
                    error: function() {
                        alert("获取音乐数据失败！");
                    }
                });
            },
            error: function() {
                alert("获取API数据失败！");
            }
        });
    });
});

以上就是使用jQuery+JSON+jPlayer实现QQ空间音乐查询功能的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例 - Python技术站