Html5游戏开发攻略(免费的音乐面包篇)

当前位置 : 首页 > 网页制作 > html5 > Html5游戏开发攻略(免费的音乐面包篇)

Html5游戏开发攻略(免费的音乐面包篇)

来源: 作者: 时间:2016-02-01 11:23
这一篇我们来尝尝免费的面包,至少目前是这样的。QQ音乐相信大家或多或少都使用过,里面的音乐资源非常多。这个时候你可能就明白了,没错,我们要在游戏中使用QQ音乐的资源当背

这一篇我们来尝尝免费的面包,至少目前是这样的。

QQ音乐相信大家或多或少都使用过,里面的音乐资源非常多。

这个时候你可能就明白了,没错,我们要在游戏中使用QQ音乐的资源当背景音乐~~~~~哦耶~!

咳咳,不过呢,由于QQ音乐在线接口是的,所以我们需要一系列工作来解密并调用。可要做好准备哟!


先放一张预览图:

\


过程其实很简单。

第一步:申请QQ音乐服务器访问权限。

第二步:获取不同的音乐列表(根据你的选择获取到)。<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+tdrI/bK9o7q4+b7dsrvNrMHQse29+NDQt9bO9qGjPC9wPgo8cD612svEsr2jurvxyKHS9MDW0MXPoqGjPC9wPgo8cD612s7lsr2jurTT0vTA1tDFz6LW0LfWzvbK/b7doaM8L3A+CjxwPrXawfmyvaO6sqW3xdL0wNahozwvcD4KPHA+PGJyPgo8L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0="brush:java;">/* QQ音乐插件 */ void function (w) { // QQ音乐对象 var QQMusic = {}; setInterval(function getJurisdiction() { ///

申请QQ音乐服务器访问权限 injectScript("http://qzone-music.qq.com/fcg-bin/fcg_set_musiccookie.fcg?fromtag=31"); return getJurisdiction; }(), 3 * 60 * 1000); function injectScript(url) { /// 引用脚本 /// 地址 var oScript = document.createElement("script"); oScript.src = url; oScript.charset = 'gb2312'; document.body.appendChild(oScript); document.body.removeChild(oScript); } function getAlbumPicture(albumId) { /// 获取专辑图片 /// 专辑编号 /// 专辑图片地址 return "http://imgcache.qq.com/music/photo/album/" + parseInt(albumId) % 100 + "/albumpic_" + albumId + "_0.jpg"; } function getSingerPicture(singerId) { /// 获取歌手图片 /// 歌手编号 /// 歌手图片地址 return "http://imgcache.qq.com/music/photo/singer/" + parseInt(singerId) % 100 + "/singerpic_" + singerId + "_0.jpg"; } // 回调函数 var cb = null; QQMusic.getGuessYouLike = function (callback) { /// 获取猜你喜欢列表 /// 回调函数 var lableId = []; for (var i = 118; i < 142; i++) { lableId.push(i); } lableId.push(150, 160); window.JsonCallBack = window.SongRecCallback = listAnalysis; cb = callback; injectScript("http://radio.cloud.music.qq.com/fcgi-bin/qm_guessyoulike.fcg?labelid=" + lableId[(lableId.length * Math.random()) | 0] + "&start=0&num=20&rnd=" + new Date().getTime()); }; QQMusic.searchSongs = function (key, callback) { /// 搜索歌曲 /// 关键字 /// 回调函数 cb = callback; key = encodeURI(key); window.MusicJsonCallBack = searchAnalysis; injectScript("http://s.plcloud.music.qq.com/fcgi-bin/smartbox.fcg?o_utf8=1&utf8=1&key=" + key + "&inCharset=GB2312&outCharset=utf-8"); }; QQMusic.getSongInfo = function (song, callback) { /// 获取歌曲信息 /// 歌曲对象 /// 回调函数 cb = function (info) { info.name = song.name; info.singer = song.singer; info.imgUrl = getAlbumPicture(song.albumId); callback(info); }; window.JsonCallback = musicAnalysis; injectScript("http://qzone-music.qq.com/fcg-bin/fcg_mv_getinfo_bysongid.fcg?mids=" + song.mid + "&uin=10000&loginUin=0&hostUin=0&outCharset=utf-8"); }; function listAnalysis(data) { /// 随机音乐列表解析 /// 随机列表数据 var playList = []; var regexp = new RegExp('(upload|stream)(\\d+)\\.(music\\.qzone\\.soso\\.com|qqmusic\\.qq\\.com)\\/(\\d+)\\.wma'); var replacement = function (word, x, a, y, b) { return 'stream' + (10 + Number(a)) + '.qqmusic.qq.com/' + (18000000 + Number(b)) + '.mp3'; }; var songs = data.songs; for (var i = 0; i < songs.length; ++i) { var song = songs[i]; var args = decodeURIComponent(song.data).replace(/\+/g, ' ').split('|'); var singerId = args[2]; var albumId = args[4]; var name = args[1]; var singer = args[3]; playList.push({ name: name, singer: singer, url: decodeURIComponent(song.url).replace(regexp, replacement), imgUrl: getAlbumPicture(albumId), singerImgUrl: getSingerPicture(singerId) }); } cb && cb(playList); }; function searchAnalysis(data) { /// 搜索列表解析 /// 搜索列表数据 var songs = data.tips.song; var albums = data.tips.album; for (var i = songs.length; i--;) { songs[i] = { id: songs[i].id, mid: songs[i].mid, name: songs[i].name, singer: songs[i].singer_name, albumId: function () { for (var n = 0; n < albums.length; n++) { if (albums[n].singer_name == songs[i].singer_name) { return albums[n].id; } } }() }; } cb && cb(songs); }; function musicAnalysis(data) { /// 单曲音乐解析 /// 单曲音乐源数据 cb && cb({ url: 'http://stream' + (10 + Number(data.num)) + '.qqmusic.qq.com/' + (30000000 + Number(data.mvlist[0].songid)) + '.mp3' }); }; w.QQMusic = QQMusic; }(window);
OK!~写好后我们怎么样才能获得数据并播放呢?

好,下面请看~

假设我们要获取到随机歌曲列表,那么只需要调用

QQMusic.getGuessYouLike(function(list){
    loadNewMusic(list[0]);
});

然后~我们再写一个loadNewMusic函数来播放它就可以了~

function loadNewMusic(musicInfo){
    /// 加载新音乐
    /// 音乐信息

    var audio = new Audio();
    audio.autoplay=true;
    audio.src=musicInfo.url;
    audio.load();
}

Ok!运行一下吧!?

Tag:
网友评论

<