diff --git a/README.md b/README.md index 60b3f35..0aed00e 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,63 @@ key: vue3、music、webapp -es6 音频库 +## 技术 + +使用 Web Audio API 实现简单的音频可视化 +使用 HTML5 API(AudioContext)实现可视化频谱效果 + +## 资料 + +audio 标签 +Audio 对象的实例 new Audio() + +HTML5 中提供了[Web Audio API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API)，开发者可以通过这个 API 为音频添加特效，实现音频可视化效果。 + +es6 音频库 +Howler.js +Annyang.js +... +[10 个优秀的 Javascript 的音频库](https://blog.csdn.net/u012612399/article/details/50071801) + +鲸鱼音效，音乐可视化效果 + +FFmpeg +Port of FFmpeg with Emscripten +[ffmpeg.js](https://github.com/Kagami/ffmpeg.js) + +协议(RTMP/HTTP(HLS)) + +WebGL 实现的粒子效果 + +three.js: +const listener = new THREE.AudioListener(); +const sound = new THREE.Audio(listener); +const loader = new THREE.AudioLoader(); + +this.waveform = new Uint8Array(analyser.frequencyBinCount); +this.frequency = new Uint8Array(analyser.frequencyBinCount); + +WebGL（全写 Web Graphics Library）是一种 3D 绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL 嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML 5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。 + +简介：Three.js 是 WebGL 的 JavaScript 3D 库，其对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，成为前端开发者完成 3D 绘图的得力工具。 + +three.js 官方文档 ：threejs.org/ +three.js 中文文档 ： techbrood.com/threejs/doc… +Three.js 整体认知（附：Three.js 功能概览） + +threejs 三大组件（场景-scene，相机-camera，渲染器-renderer） + +gsap => TweenMax + +## 参考 + +- [手把手教你用 Js 实现音频可视化](https://www.jianshu.com/p/7c4f58ee8972) +- [Web Audio API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API) +- [音频可视化引发的思考](https://www.jianshu.com/p/002d83bd98a3) +- [Web Audio 在音频可视化中的应用](https://segmentfault.com/a/1190000020498421) +- [利用 AudioContext 来实现网易云音乐的鲸鱼音效](https://segmentfault.com/a/1190000017090438) +- [音乐可视化-Web Audio Api 接口，AudioContext 对象](https://baijiahao.baidu.com/s?id=1624606995991147075&wfr=spider&for=pc) +- [模拟制作网易云音乐(AudioContext)](https://www.cnblogs.com/rynxiao/p/7798419.html) +- [margox/vudio.js](https://github.com/margox/vudio.js) +- [https://alex2wong.github.io/vudio.js/](https://alex2wong.github.io/vudio.js/) +- []() diff --git a/package-lock.json b/package-lock.json index 8001453..dacf7c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "vue3-awesome-demo", + "name": "vue3-music", "version": "0.1.0", "lockfileVersion": 1, "requires": true, @@ -5977,6 +5977,12 @@ "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs=", "dev": true }, + "gsap": { + "version": "3.4.2", + "resolved": "https://registry.npm.taobao.org/gsap/download/gsap-3.4.2.tgz", + "integrity": "sha1-LNhcV5IFBkL4nV1OJ3XWkNcTGjc=", + "dev": true + }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-5.1.1.tgz", @@ -10793,6 +10799,11 @@ "neo-async": "^2.6.0" } }, + "three": { + "version": "0.119.1", + "resolved": "https://registry.npm.taobao.org/three/download/three-0.119.1.tgz?cache=0&sync_timestamp=1596123261570&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthree%2Fdownload%2Fthree-0.119.1.tgz", + "integrity": "sha1-nZeaCCxM2WIq+ONJio36AmphkzI=" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz", diff --git a/package.json b/package.json index 66abb17..878251d 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dayjs": "^1.8.29", "lodash": "^4.17.19", "register-service-worker": "^1.7.1", + "three": "^0.119.1", "vue": "^3.0.0-rc.4", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.0.0", @@ -36,10 +37,11 @@ "eslint": "^7.4.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-vue": "^7.0.0-beta.0", + "gsap": "^3.4.2", "prettier": "^2.0.5", "sass": "^1.26.10", "sass-loader": "^9.0.2", "typescript": "~3.9.7", "vue-cli-plugin-vue-next": "~0.1.3" } -} \ No newline at end of file +} diff --git a/src/App.vue b/src/App.vue index 36b05e6..d85dcc4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,6 +10,9 @@
(🌽 ) => About
+
+ (🌽 ) => Music +
diff --git a/src/assets/596d78dfa523e.jpg b/src/assets/596d78dfa523e.jpg new file mode 100644 index 0000000..214e7c4 Binary files /dev/null and b/src/assets/596d78dfa523e.jpg differ diff --git a/src/assets/596d78e1b27e5.jpg b/src/assets/596d78e1b27e5.jpg new file mode 100644 index 0000000..5dd3910 Binary files /dev/null and b/src/assets/596d78e1b27e5.jpg differ diff --git a/src/assets/5f1a7c95f359c.jpg b/src/assets/5f1a7c95f359c.jpg new file mode 100644 index 0000000..c369a59 Binary files /dev/null and b/src/assets/5f1a7c95f359c.jpg differ diff --git a/src/assets/5f1a7c9a3b617.jpg b/src/assets/5f1a7c9a3b617.jpg new file mode 100644 index 0000000..d4c106a Binary files /dev/null and b/src/assets/5f1a7c9a3b617.jpg differ diff --git a/src/assets/5f2a711033267.png b/src/assets/5f2a711033267.png new file mode 100644 index 0000000..00f2940 Binary files /dev/null and b/src/assets/5f2a711033267.png differ diff --git a/src/assets/5f3344e5311d2.jpg b/src/assets/5f3344e5311d2.jpg new file mode 100644 index 0000000..e2608b2 Binary files /dev/null and b/src/assets/5f3344e5311d2.jpg differ diff --git a/src/music-files/Cashmere Cat,Lana Del Rey - National Anthem (Cashmere Cat Remix).mp3 b/src/music-files/Cashmere Cat,Lana Del Rey - National Anthem (Cashmere Cat Remix).mp3 new file mode 100644 index 0000000..8b9f2eb Binary files /dev/null and b/src/music-files/Cashmere Cat,Lana Del Rey - National Anthem (Cashmere Cat Remix).mp3 differ diff --git a/src/music-files/Hawk Nelson - Sold Out.mp3 b/src/music-files/Hawk Nelson - Sold Out.mp3 new file mode 100644 index 0000000..bafa998 Binary files /dev/null and b/src/music-files/Hawk Nelson - Sold Out.mp3 differ diff --git a/src/music-files/Lana Del Rey - Body Electric (Kraeday Trap Remix).mp3 b/src/music-files/Lana Del Rey - Body Electric (Kraeday Trap Remix).mp3 new file mode 100644 index 0000000..b6b0e6c Binary files /dev/null and b/src/music-files/Lana Del Rey - Body Electric (Kraeday Trap Remix).mp3 differ diff --git a/src/music-files/Naughty Boy,Sam Smith - La La La.mp3 b/src/music-files/Naughty Boy,Sam Smith - La La La.mp3 new file mode 100644 index 0000000..a502c06 Binary files /dev/null and b/src/music-files/Naughty Boy,Sam Smith - La La La.mp3 differ diff --git a/src/music-files/lol.mp3 b/src/music-files/lol.mp3 new file mode 100644 index 0000000..0773155 Binary files /dev/null and b/src/music-files/lol.mp3 differ diff --git "a/src/music-files/\344\270\200\346\233\262\347\233\270\346\200\235-\351\230\277\346\202\240\346\202\240.mp3" "b/src/music-files/\344\270\200\346\233\262\347\233\270\346\200\235-\351\230\277\346\202\240\346\202\240.mp3" new file mode 100644 index 0000000..fcbb2d5 Binary files /dev/null and "b/src/music-files/\344\270\200\346\233\262\347\233\270\346\200\235-\351\230\277\346\202\240\346\202\240.mp3" differ diff --git a/src/router/index.ts b/src/router/index.ts index 64ef646..3fd58bf 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -22,6 +22,12 @@ const routes: Array = [ component: () => import(/* webpackChunkName: "about" */ "../views/Github.vue"), }, + { + path: "/music", + name: "Music", + component: () => + import(/* webpackChunkName: "about" */ "../views/Music.vue"), + }, ]; const router = createRouter({ diff --git a/src/views/Music.vue b/src/views/Music.vue new file mode 100644 index 0000000..4689882 --- /dev/null +++ b/src/views/Music.vue @@ -0,0 +1,910 @@ + + + + +