Update Deps

Add tips for instant save

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) [2019] [MengYX]
+Copyright (c) 2019-2020 MengYX
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,7 +8,7 @@
 
 # Features
 - [x] Unlock in browser 在浏览器中解锁
-- [x] QQMusic Format QQ音乐格式 (.qmc0/.qmc3/.qmcflac/.qmcogg/.tkm)
+- [x] QQMusic Format QQ音乐格式 (.qmc0/.qmc2/.qmc3/.qmcflac/.qmcogg/.tkm)
 - [x] MooMusic Format Moo音乐格式 ([.bkcmp3/.bkcflac](https://github.com/ix64/unlock-music/issues/11))
 - [x] QQMusic Tm Format QQ音乐Tm格式 (.tm0/.tm2/.tm3/.tm6)
 - [x] QQMusic New Format QQ音乐新格式 (Experimental 实验性支持)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unlock-music",
-  "version": "1.3.3",
-  "updateInfo": "支持网易云音乐DJ类型ncm；优化旧浏览器的支持",
+  "version": "1.4.0",
+  "updateInfo": "支持.qmc2；qq音乐显示封面图片；界面优化",
   "license": "MIT",
   "description": "Unlock encrypted music file in browser.",
   "repository": {
@@ -19,14 +19,15 @@
     "core-js": "^3.6.4",
     "crypto-js": "^4.0.0",
     "element-ui": "^2.13.0",
-    "music-metadata-browser": "^2.0.4",
-    "register-service-worker": "^1.6.2",
+    "iconv-lite": "^0.5.1",
+    "music-metadata-browser": "^2.0.5",
+    "register-service-worker": "^1.7.1",
     "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-pwa": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
+    "@vue/cli-plugin-babel": "^4.3.0",
+    "@vue/cli-plugin-pwa": "^4.3.0",
+    "@vue/cli-service": "^4.3.0",
     "babel-plugin-component": "^1.1.1",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.11",

src/App.vue

@@ -4,7 +4,7 @@
         <el-main>
             <x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
 
-            <el-row id="app-control">
+            <div id="app-control">
                 <el-row style="padding-bottom: 1em; font-size: 14px">
                     歌曲命名格式：
                     <el-radio label="1" name="format" v-model="download_format">歌手-歌曲名</el-radio>
@@ -14,10 +14,20 @@
                 </el-row>
                 <el-row>
                     <el-button @click="handleDownloadAll" icon="el-icon-download" plain>下载全部</el-button>
-                    <el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">删除全部</el-button>
-                    <el-checkbox border style="margin-left: 1em" v-model="instant_download">立即保存</el-checkbox>
+                    <el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">清除全部</el-button>
+
+
+                    <el-tooltip class="item" effect="dark" placement="top-start">
+                        <div slot="content">
+                            当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/>
+                            开启后，解锁结果将不会存留于浏览器中，防止内存不足。
+                        </div>
+                        <el-checkbox border style="margin-left: 1em" v-model="instant_download">立即保存</el-checkbox>
+                    </el-tooltip>
+
+
                 </el-row>
-            </el-row>
+            </div>
             <audio :autoplay="playing_auto" :src="playing_url" controls/>
 
             <x-preview :download_format="download_format" :table-data="tableData"
@@ -35,7 +45,7 @@
                 <a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">其他格式</a>。
             </el-row>
             <el-row>
-                <span>Copyright &copy; 2019</span> MengYX
+                <span>Copyright &copy; 2019-</span><span v-text="(new Date()).getFullYear()"></span> MengYX
                 音乐解锁使用
                 <a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
                 开放源代码
@@ -140,8 +150,8 @@
                 });
                 if (process.env.NODE_ENV === 'production') {
                     window._paq.push(["trackEvent", "Error", errInfo, filename]);
-                    console.error(errInfo, filename);
                 }
+                console.error(errInfo, filename);
             },
             changePlaying(url) {
                 this.playing_url = url;

src/component/upload.vue

@@ -9,6 +9,13 @@
         <i class="el-icon-upload"/>
         <div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
         <div class="el-upload__tip" slot="tip">本工具仅在浏览器内对文件进行解锁，无需消耗流量</div>
+        <transition name="el-fade-in">
+            <el-progress
+                    :format="progressFormat" :percentage="progress_percent" :stroke-width="16"
+                    :text-inside="true" style="margin: 16px 6px 0 6px"
+                    v-show="progress_show"
+            ></el-progress>
+        </transition>
     </el-upload>
 </template>
 
@@ -22,7 +29,13 @@
                 cacheQueue: [],
                 workers: [],
                 idle_workers: [],
-                thread_num: 1
+                thread_num: 1,
+
+                progress_show: false,
+
+                progress_finished: 0,
+                progress_all: 0,
+                progress_percent: 0,
             }
         },
         mounted() {
@@ -47,7 +60,25 @@
             }
         },
         methods: {
+            progressFormat() {
+                return this.progress_finished + "/" + (this.progress_all)
+            },
+            progressChange(finish, all) {
+                this.progress_all += all;
+                this.progress_finished += finish;
+                this.progress_percent = Math.round(this.progress_finished / this.progress_all * 100);
+                if (this.progress_finished === this.progress_all) {
+                    setTimeout(() => {
+                        this.progress_show = false;
+                        this.progress_finished = 0;
+                        this.progress_all = 0;
+                    }, 3000);
+                } else {
+                    this.progress_show = true;
+                }
+            },
             handleFile(file) {
+                this.progressChange(0, +1);
                 // 有空闲worker 立刻处理文件
                 if (this.idle_workers.length > 0) {
                     this.handleDoFile(file, this.idle_workers.shift());
@@ -70,9 +101,11 @@
                     this.$emit("handle_finish", data);
                     // 完成之后 执行新任务 todo: 可能导致call stack过长
                     this.handleCacheQueue(worker_id);
+                    this.progressChange(+1, 0);
                 }).catch(err => {
                     this.$emit("handle_error", err, file.name);
                     this.handleCacheQueue(worker_id);
+                    this.progressChange(+1, 0);
                 })
             },
         }

src/component/util.js

@@ -23,5 +23,8 @@ export function DownloadBlobMusic(data, format) {
 
 export function RemoveBlobMusic(data) {
     URL.revokeObjectURL(data.file);
-    URL.revokeObjectURL(data.picture);
+    if (data.picture.startsWith("blob:")) {
+        URL.revokeObjectURL(data.picture);
+    }
+
 }

src/decrypt/common.js

@@ -9,7 +9,7 @@ export async function CommonDecrypt(file) {
     let rt_data;
     switch (raw_ext) {
         case "ncm":// Netease Mp3/Flac
-            rt_data = await NcmDecrypt.Decrypt(file.raw);
+            rt_data = await NcmDecrypt.Decrypt(file.raw, raw_filename, raw_ext);
             break;
         case "mp3":// Raw Mp3
         case "flac"://Raw Flac
@@ -22,6 +22,7 @@ export async function CommonDecrypt(file) {
             rt_data = await RawDecrypt.Decrypt(file.raw, raw_filename, "mp3");
             break;
         case "qmc3"://QQ Music Android Mp3
+        case "qmc2"://QQ Music Android Ogg
         case "qmc0"://QQ Music Android Mp3
         case "qmcflac"://QQ Music Android Flac
         case "qmcogg"://QQ Music Android Ogg

src/decrypt/ncm.js

@@ -1,11 +1,9 @@
 const CryptoJS = require("crypto-js");
-const ID3Writer = require("browser-id3-writer");
 const CORE_KEY = CryptoJS.enc.Hex.parse("687a4852416d736f356b496e62617857");
 const META_KEY = CryptoJS.enc.Hex.parse("2331346C6A6B5F215C5D2630553C2728");
-import {AudioMimeType, DetectAudioExt, GetArrayBuffer} from "./util"
-
-export async function Decrypt(file) {
+import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetFileInfo, GetWebImage, WriteMp3Meta} from "./util"
 
+export async function Decrypt(file, raw_filename, raw_ext) {
     const fileBuffer = await GetArrayBuffer(file);
     const dataView = new DataView(fileBuffer);
 
@@ -13,60 +11,44 @@ export async function Decrypt(file) {
         dataView.getUint32(4, true) !== 0x4d414446)
         return {status: false, message: "此ncm文件已损坏"};
 
-
     const keyDataObj = getKeyData(dataView, fileBuffer, 10);
     const keyBox = getKeyBox(keyDataObj.data);
 
     const musicMetaObj = getMetaData(dataView, fileBuffer, keyDataObj.offset);
     const musicMeta = musicMetaObj.data;
-
     let audioOffset = musicMetaObj.offset + dataView.getUint32(musicMetaObj.offset + 5, true) + 13;
     let audioData = new Uint8Array(fileBuffer, audioOffset);
 
     for (let cur = 0; cur < audioData.length; ++cur) audioData[cur] ^= keyBox[cur & 0xff];
 
-    if (musicMeta.format === undefined) musicMeta.format = DetectAudioExt(audioData, "mp3");
 
-    const mime = AudioMimeType[musicMeta.format];
+    if (musicMeta.album === undefined) musicMeta.album = "";
 
     const artists = [];
-    musicMeta.artist.forEach(arr => artists.push(arr[0]));
-    if (musicMeta.format === "mp3")
-        audioData = await writeID3(audioData, artists, musicMeta.musicName, musicMeta.album, musicMeta.albumPic);
+    if (!!musicMeta.artist) musicMeta.artist.forEach(arr => artists.push(arr[0]));
+    const info = GetFileInfo(artists.join(" & "), musicMeta.musicName, raw_filename);
+    if (artists.length === 0) artists.push(info.artist);
 
+    if (musicMeta.format === undefined) musicMeta.format = DetectAudioExt(audioData, "mp3");
+
+    const imageInfo = await GetWebImage(musicMeta.albumPic);
+    if (musicMeta.format === "mp3") audioData = await WriteMp3Meta(
+        audioData, artists, info.title, musicMeta.album, imageInfo.buffer, musicMeta.albumPic);
+
+    const mime = AudioMimeType[musicMeta.format];
     const musicData = new Blob([audioData], {type: mime});
     return {
         status: true,
-        title: musicMeta.musicName,
-        artist: artists.join(" & "),
+        title: info.title,
+        artist: info.artist,
         ext: musicMeta.format,
         album: musicMeta.album,
-        picture: musicMeta.albumPic,
+        picture: imageInfo.url,
         file: URL.createObjectURL(musicData),
         mime: mime
     };
 }
 
-async function writeID3(audioData, artistList, title, album, picture) {
-    const writer = new ID3Writer(audioData);
-    writer.setFrame("TPE1", artistList)
-        .setFrame("TIT2", title)
-        .setFrame("TALB", album);
-    if (picture !== "") {
-        try {
-            const img = await (await fetch(picture)).arrayBuffer();
-            writer.setFrame('APIC', {
-                type: 3,
-                data: img,
-                description: 'Cover'
-            })
-        } catch (e) {
-            console.log("Fail to write cover image!");
-        }
-    }
-    writer.addTag();
-    return writer.arrayBuffer;
-}
 
 function getKeyData(dataView, fileBuffer, offset) {
     const keyLen = dataView.getUint32(offset, true);
@@ -129,9 +111,7 @@ function getKeyBox(keyData) {
 function getMetaData(dataView, fileBuffer, offset) {
     const metaDataLen = dataView.getUint32(offset, true);
     offset += 4;
-    if (metaDataLen === 0) {
-        return {};
-    }
+    if (metaDataLen === 0) return {data: {}, offset: offset};
 
     const cipherText = new Uint8Array(fileBuffer, offset, metaDataLen).map(
         data => data ^ 0x63

src/decrypt/qmc.js

@@ -1,12 +1,15 @@
-import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetCoverURL, GetFileInfo} from "./util";
+import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetFileInfo, GetMetaCoverURL, RequestJsonp} from "./util";
 import {QmcMaskCreate58, QmcMaskDetectMflac, QmcMaskDetectMgg, QmcMaskGetDefault} from "./qmcMask";
 
+import {decode} from "iconv-lite"
+
 const musicMetadata = require("music-metadata-browser");
 
 const HandlerMap = {
     "mgg": {handler: QmcMaskDetectMgg, ext: "ogg", detect: true},
     "mflac": {handler: QmcMaskDetectMflac, ext: "flac", detect: true},
     "qmc0": {handler: QmcMaskGetDefault, ext: "mp3", detect: false},
+    "qmc2": {handler: QmcMaskGetDefault, ext: "ogg", detect: false},
     "qmc3": {handler: QmcMaskGetDefault, ext: "mp3", detect: false},
     "qmcogg": {handler: QmcMaskGetDefault, ext: "ogg", detect: false},
     "qmcflac": {handler: QmcMaskGetDefault, ext: "flac", detect: false},
@@ -31,25 +34,39 @@ export async function Decrypt(file, raw_filename, raw_ext) {
         audioData = fileData;
         seed = handler.handler(audioData);
     }
-    const dec = seed.Decrypt(audioData);
+    let musicDecoded = seed.Decrypt(audioData);
 
-    const ext = DetectAudioExt(dec, handler.ext);
+    const ext = DetectAudioExt(musicDecoded, handler.ext);
     const mime = AudioMimeType[ext];
 
-    const musicData = new Blob([dec], {type: mime});
+    let musicBlob = new Blob([musicDecoded], {type: mime});
 
-    const tag = await musicMetadata.parseBlob(musicData);
-    const info = GetFileInfo(tag.common.artist, tag.common.title, raw_filename);
+    const musicMeta = await musicMetadata.parseBlob(musicBlob);
+    let isGbk = musicMeta.native["ID3v2.3"]
+        .some(item => item.id === "TCON" && item.value === "(12)");
+    if (isGbk) {
+        musicMeta.common.artist = decode(musicMeta.common.artist, "gbk");
+        musicMeta.common.title = decode(musicMeta.common.title, "gbk");
+        musicMeta.common.album = decode(musicMeta.common.album, "gbk");
+    }
+    //todo: Use artists list to replace artist
+    const info = GetFileInfo(musicMeta.common.artist, musicMeta.common.title, raw_filename);
     if (handler.detect) reportKeyUsage(keyData, seed.Matrix128,
-        info.artist, info.title, tag.common.album, raw_filename, raw_ext);
+        info.artist, info.title, musicMeta.common.album, raw_filename, raw_ext);
+
+    let imgUrl = GetMetaCoverURL(musicMeta);
+    if (imgUrl === "") {
+        imgUrl = await queryAlbumCoverImage(info.artist, info.title, musicMeta.common.album);
+        //todo: 解决跨域获取图像的问题
+    }
     return {
         status: true,
         title: info.title,
         artist: info.artist,
         ext: ext,
-        album: tag.common.album,
-        picture: GetCoverURL(tag),
-        file: URL.createObjectURL(musicData),
+        album: musicMeta.common.album,
+        picture: imgUrl,
+        file: URL.createObjectURL(musicBlob),
         mime: mime
     }
 }
@@ -77,3 +94,28 @@ async function queryKeyInfo(keyData, filename, format) {
     } catch (e) {
     }
 }
+
+async function queryAlbumCoverImage(artist, title, album) {
+    let song_query_url = "https://c.y.qq.com/soso/fcgi-bin/client_search_cp?n=10&new_json=1&w=" +
+        encodeURIComponent(artist + " " + title + " " + album);
+    let jsonpData;
+    let queriedSong = undefined;
+    try {
+        jsonpData = await RequestJsonp(song_query_url, "callback");
+        queriedSong = jsonpData["data"]["song"]["list"][0];
+    } catch (e) {
+        console.error(e)
+    }
+    console.log(queriedSong);
+    let imgUrl = "";
+    if (undefined !== queriedSong && undefined !== queriedSong["album"]) {
+        if (queriedSong["album"]["pmid"] !== undefined) {
+            imgUrl = "https://y.gtimg.cn/music/photo_new/T002M000" + queriedSong["album"]["pmid"] + ".jpg"
+        } else if (queriedSong["album"]["id"] !== undefined) {
+            imgUrl = "https://imgcache.qq.com/music/photo/album/" +
+                queriedSong["album"]["id"] % 100 +
+                "/albumpic_" + queriedSong["album"]["id"] + "_0.jpg"
+        }
+    }
+    return imgUrl;
+}

src/decrypt/qmcMask.js

@@ -1,4 +1,4 @@
-import {FLAC_HEADER, IsBytesEqual} from "./util"
+import {FLAC_HEADER, IsBytesEqual, OGG_HEADER} from "./util"
 
 const QMOggConstHeader = [
     0x4F, 0x67, 0x67, 0x53, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
@@ -119,18 +119,18 @@ export function QmcMaskDetectMflac(data) {
         } catch (e) {
         }
     }
-    return mask
+    return mask;
 }
 
-export function QmcMaskDetectMgg(input) {
-    if (input.length < QMOggConstHeader.length) return;
+export function QmcMaskDetectMgg(data) {
+    if (data.length < QMOggConstHeader.length) return;
     let matrixConfidence = {};
     for (let i = 0; i < 58; i++) matrixConfidence[i] = {};
 
     for (let idx128 = 0; idx128 < QMOggConstHeader.length; idx128++) {
         if (QMOggConstHeaderConfidence[idx128] === 0) continue;
         let idx58 = GetMask58Index(idx128);
-        let mask = input[idx128] ^ QMOggConstHeader[idx128];
+        let mask = data[idx128] ^ QMOggConstHeader[idx128];
         let confidence = QMOggConstHeaderConfidence[idx128];
         if (mask in matrixConfidence[idx58]) {
             matrixConfidence[idx58][mask] += confidence
@@ -146,7 +146,9 @@ export function QmcMaskDetectMgg(input) {
     } catch (e) {
         return;
     }
-    return new QmcMask(matrix, superA, superB);
+    const mask = new QmcMask(matrix, superA, superB);
+    if (!IsBytesEqual(OGG_HEADER, mask.Decrypt(data.slice(0, OGG_HEADER.length)))) return;
+    return mask;
 }
 
 export function QmcMaskCreate128(mask128) {

src/decrypt/raw.js

@@ -1,5 +1,5 @@
 const musicMetadata = require("music-metadata-browser");
-import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetCoverURL, GetFileInfo} from "./util";
+import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetMetaCoverURL, GetFileInfo} from "./util";
 
 export async function Decrypt(file, raw_filename, raw_ext, detect = true) {
     let ext = raw_ext;
@@ -16,7 +16,7 @@ export async function Decrypt(file, raw_filename, raw_ext, detect = true) {
         artist: info.artist,
         ext: ext,
         album: tag.common.album,
-        picture: GetCoverURL(tag),
+        picture: GetMetaCoverURL(tag),
         file: URL.createObjectURL(file),
         mime: AudioMimeType[ext]
     }

src/decrypt/util.js

@@ -1,3 +1,4 @@
+const ID3Writer = require("browser-id3-writer");
 export const FLAC_HEADER = [0x66, 0x4C, 0x61, 0x43];
 export const MP3_HEADER = [0x49, 0x44, 0x33];
 export const OGG_HEADER = [0x4F, 0x67, 0x67, 0x53];
@@ -38,7 +39,7 @@ export function GetFileInfo(artist, title, filenameNoExt) {
 /**
  * @return {string}
  */
-export function GetCoverURL(metadata) {
+export function GetMetaCoverURL(metadata) {
     let pic_url = "";
     if (metadata.common.picture !== undefined && metadata.common.picture.length > 0) {
         let pic = new Blob([metadata.common.picture[0].data], {type: metadata.common.picture[0].format});
@@ -61,6 +62,56 @@ export function DetectAudioExt(data, fallbackExt) {
     if (IsBytesEqual(MP3_HEADER, data.slice(0, MP3_HEADER.length))) return "mp3";
     if (IsBytesEqual(FLAC_HEADER, data.slice(0, FLAC_HEADER.length))) return "flac";
     if (IsBytesEqual(OGG_HEADER, data.slice(0, OGG_HEADER.length))) return "ogg";
-    if (IsBytesEqual(M4A_HEADER, data.slice(4, 8))) return "m4a";
+    if (IsBytesEqual(M4A_HEADER, data.slice(4, 4 + M4A_HEADER.length))) return "m4a";
     return fallbackExt;
 }
+
+
+export async function GetWebImage(pic_url) {
+    try {
+        let resp = await fetch(pic_url);
+        let mime = resp.headers.get("Content-Type");
+        if (mime.startsWith("image/")) {
+            let buf = await resp.arrayBuffer();
+            let objBlob = new Blob([buf], {type: mime});
+            let objUrl = URL.createObjectURL(objBlob);
+            return {"buffer": buf, "url": objUrl, "type": mime};
+        }
+    } catch (e) {
+    }
+    return {"buffer": null, "url": "", "type": ""}
+}
+
+export async function WriteMp3Meta(audioData, artistList, title, album, pictureData = null, pictureDesc = "Cover") {
+    const writer = new ID3Writer(audioData);
+    writer.setFrame("TPE1", artistList)
+        .setFrame("TIT2", title)
+        .setFrame("TALB", album);
+    if (pictureData !== null) {
+        writer.setFrame('APIC', {
+            type: 3,
+            data: pictureData,
+            description: pictureDesc,
+        })
+    }
+    writer.addTag();
+    return writer.arrayBuffer;
+}
+
+export function RequestJsonp(url, callback_name = "callback") {
+    return new Promise((resolve, reject) => {
+        let node;
+        window[callback_name] = function (data) {
+            delete window[callback_name];
+            if (node.parentNode) node.parentNode.removeChild(node);
+            resolve(data)
+        };
+        node = document.createElement('script');
+        node.type = "text/javascript";
+        node.src = url;
+        node.addEventListener('error', msg => {
+            reject(msg);
+        });
+        document.head.appendChild(node);
+    });
+}

src/main.js

@@ -3,10 +3,10 @@ import App from './App.vue'
 import './registerServiceWorker'
 import {
     Button, Col, Container, Footer, Icon, Image, Link, Main,
-    Row, Table, TableColumn, Upload, Radio, Checkbox,
-    Notification,
+    Row, Table, TableColumn, Upload, Radio, Checkbox, Progress,
+    Notification, Tooltip,
 } from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css'
+import 'element-ui/lib/theme-chalk/base.css';
 
 Vue.use(Link);
 Vue.use(Image);
@@ -22,6 +22,8 @@ Vue.use(Col);
 Vue.use(Upload);
 Vue.use(Checkbox);
 Vue.use(Radio);
+Vue.use(Tooltip);
+Vue.use(Progress);
 Vue.prototype.$notify = Notification;
 
 Vue.config.productionTip = false;

vue.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     publicPath: '',
-    productionSourceMap: true,
+    productionSourceMap: false,
     pwa: {
         workboxOptions: {
             skipWaiting: true