Skip to content

Latest commit

 

History

History
72 lines (49 loc) · 3.29 KB

README.md

File metadata and controls

72 lines (49 loc) · 3.29 KB
Raw

vue3 music

key: vue3、music、webapp

技术

使用 Web Audio API 实现简单的音频可视化
使用 HTML5 API(AudioContext)实现可视化频谱效果

资料

audio 标签
Audio 对象的实例 new Audio()

HTML5 中提供了Web Audio API，开发者可以通过这个 API 为音频添加特效，实现音频可视化效果。

es6 音频库
Howler.js
Annyang.js
... 10 个优秀的 Javascript 的音频库

鲸鱼音效，音乐可视化效果

FFmpeg
Port of FFmpeg with Emscripten
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

howler.js_现代浏览器的js音频库
地址: https://howlerjs.com
GitHub: https://github.com/goldfire/howler.js
现代浏览器的js音频库howler.js 是一个针对现代浏览器的音频库。

参考