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

2022-12-31 16:42:48

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

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

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

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

先放一张预览图：

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

过程其实很简单。

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

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

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

第四步：获取音乐信息。

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

第六步：播放音乐。

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

Ok!运行一下吧！？

上一篇：第一讲 新手如何学习HTTP协议之实践项目多开微信机器人


下一篇：在 Linux 上找出并解决程序错误的主要方法【转】