Html5游戏开发攻略（免费的音乐面包篇）

2022-06-12 20:32:15

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

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

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

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

 

先放一张预览图：

Html5游戏开发攻略（免费的音乐面包篇）

 

过程其实很简单。

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

第二步：获取不同的音乐列表（根据你的选择获取到）。

第三步：根据不同列表进行分析。

第四步：获取音乐信息。

第五步：从音乐信息中分析数据。

第六步：播放音乐。

 

  1. /* 
  2.     QQ音乐插件 
  3. */  
  4. void function (w) {  
  5.   
  6.     // QQ音乐对象  
  7.     var QQMusic = {};  
  8.   
  9.     setInterval(function getJurisdiction() {  
  10.         /// <summary>申请QQ音乐服务器访问权限</summary>  
  11.   
  12.         injectScript("http://qzone-music.qq.com/fcg-bin/fcg_set_musiccookie.fcg?fromtag=31");  
  13.         return getJurisdiction;  
  14.     }(), 3 * 60 * 1000);  
  15.   
  16.     function injectScript(url) {  
  17.         /// <summary>引用脚本</summary>  
  18.         /// <param name="url" type="String">地址</param>  
  19.   
  20.         var oScript = document.createElement("script");  
  21.         oScript.src = url;  
  22.         oScript.charset = ‘gb2312‘;  
  23.         document.body.appendChild(oScript);  
  24.         document.body.removeChild(oScript);  
  25.     }  
  26.   
  27.     function getAlbumPicture(albumId) {  
  28.         /// <summary>获取专辑图片</summary>  
  29.         /// <param name="albumId" type="Number">专辑编号</param>  
  30.         /// <returns type="String">专辑图片地址</returns>  
  31.   
  32.         return "http://imgcache.qq.com/music/photo/album/" + parseInt(albumId) % 100 + "/albumpic_" + albumId + "_0.jpg";  
  33.     }  
  34.   
  35.     function getSingerPicture(singerId) {  
  36.         /// <summary>获取歌手图片</summary>  
  37.         /// <param name="singerId" type="Number">歌手编号</param>  
  38.         /// <returns type="String">歌手图片地址</returns>  
  39.   
  40.         return "http://imgcache.qq.com/music/photo/singer/" + parseInt(singerId) % 100 + "/singerpic_" + singerId + "_0.jpg";  
  41.     }  
  42.   
  43.     // 回调函数  
  44.     var cb = null;  
  45.   
  46.     QQMusic.getGuessYouLike = function (callback) {  
  47.         /// <summary>获取猜你喜欢列表</summary>  
  48.         /// <param name="callback" type="Function">回调函数</param>  
  49.   
  50.         var lableId = [];  
  51.         for (var i = 118; i < 142; i++) {  
  52.             lableId.push(i);  
  53.         }  
  54.         lableId.push(150, 160);  
  55.   
  56.         window.JsonCallBack = window.SongRecCallback = listAnalysis;  
  57.   
  58.         cb = callback;  
  59.   
  60.         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());  
  61.     };  
  62.   
  63.     QQMusic.searchSongs = function (key, callback) {  
  64.         /// <summary>搜索歌曲</summary>  
  65.         /// <param name="key" type="String">关键字</param>  
  66.         /// <param name="callback" type="Function">回调函数</param>  
  67.   
  68.         cb = callback;  
  69.   
  70.         key = encodeURI(key);  
  71.   
  72.         window.MusicJsonCallBack = searchAnalysis;  
  73.   
  74.         injectScript("http://s.plcloud.music.qq.com/fcgi-bin/smartbox.fcg?o_utf8=1&utf8=1&key=" + key + "&inCharset=GB2312&outCharset=utf-8");  
  75.     };  
  76.   
  77.     QQMusic.getSongInfo = function (song, callback) {  
  78.         /// <summary>获取歌曲信息</summary>  
  79.         /// <param name="key" type="Object">歌曲对象</param>  
  80.         /// <param name="callback" type="Function">回调函数</param>  
  81.   
  82.         cb = function (info) {  
  83.             info.name = song.name;  
  84.             info.singer = song.singer;  
  85.             info.imgUrl = getAlbumPicture(song.albumId);  
  86.             callback(info);  
  87.         };  
  88.   
  89.         window.JsonCallback = musicAnalysis;  
  90.   
  91.         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");  
  92.     };  
  93.   
  94.     function listAnalysis(data) {  
  95.         /// <summary>随机音乐列表解析</summary>  
  96.         /// <param name="data" type="Array">随机列表数据</param>  
  97.   
  98.         var playList = [];  
  99.         var regexp = new RegExp(‘(upload|stream)(\\d+)\\.(music\\.qzone\\.soso\\.com|qqmusic\\.qq\\.com)\\/(\\d+)\\.wma‘);  
  100.         var replacement = function (word, x, a, y, b) {  
  101.             return ‘stream‘ + (10 + Number(a)) + ‘.qqmusic.qq.com/‘ + (18000000 + Number(b)) + ‘.mp3‘;  
  102.         };  
  103.         var songs = data.songs;  
  104.         for (var i = 0; i < songs.length; ++i) {  
  105.             var song = songs[i];  
  106.             var args = decodeURIComponent(song.data).replace(/\+/g, ‘ ‘).split(‘|‘);  
  107.             var singerId = args[2];  
  108.             var albumId = args[4];  
  109.             var name = args[1];  
  110.             var singer = args[3];  
  111.             playList.push({  
  112.                 name: name,  
  113.                 singer: singer,  
  114.                 url: decodeURIComponent(song.url).replace(regexp, replacement),  
  115.                 imgUrl: getAlbumPicture(albumId),  
  116.                 singerImgUrl: getSingerPicture(singerId)  
  117.             });  
  118.         }  
  119.         cb && cb(playList);  
  120.     };  
  121.   
  122.     function searchAnalysis(data) {  
  123.         /// </summary>搜索列表解析</summary>  
  124.         /// <param name="data" type="Array">搜索列表数据</param>  
  125.   
  126.         var songs = data.tips.song;  
  127.         var albums = data.tips.album;  
  128.         for (var i = songs.length; i--;) {  
  129.             songs[i] = {  
  130.                 id: songs[i].id,  
  131.                 mid: songs[i].mid,  
  132.                 name: songs[i].name,  
  133.                 singer: songs[i].singer_name,  
  134.                 albumId: function () {  
  135.                     for (var n = 0; n < albums.length; n++) {  
  136.                         if (albums[n].singer_name == songs[i].singer_name) {  
  137.                             return albums[n].id;  
  138.                         }  
  139.                     }  
  140.                 }()  
  141.             };  
  142.         }  
  143.         cb && cb(songs);  
  144.     };  
  145.   
  146.     function musicAnalysis(data) {  
  147.         /// <summary>单曲音乐解析</summary>  
  148.         /// <param name="data" type="Object">单曲音乐源数据</param>  
  149.   
  150.         cb && cb({  
  151.             url: ‘http://stream‘ + (10 + Number(data.num)) + ‘.qqmusic.qq.com/‘ + (30000000 + Number(data.mvlist[0].songid)) + ‘.mp3‘  
  152.         });  
  153.     };  
  154.   
  155.     w.QQMusic = QQMusic;  
  156. }(window);  


OK！~写好后我们怎么样才能获得数据并播放呢？

 

好，下面请看~

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

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


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

  

  1. function loadNewMusic(musicInfo){  
  2.     /// <summary>加载新音乐</summary>  
  3.     /// <param name="musicInfo" type="Object">音乐信息</param>  
  4.   
  5.     var audio = new Audio();  
  6.     audio.autoplay=true;  
  7.     audio.src=musicInfo.url;  
  8.     audio.load();  
  9. }  


Ok!运行一下吧！？

Html5游戏开发攻略（免费的音乐面包篇）,布布扣,bubuko.com

Html5游戏开发攻略（免费的音乐面包篇）

上一篇：VS2010新建Web网站与新建Web应用程序的区别


下一篇：[妙味JS基础]第九课：定时器管理、函数封装