vue 音频可视化

简介: ​书接上文 vue实现歌词滚动效果,既然有了歌词滚动那么今天给大家来个绝活——音频可视化。伴随着各种新技术的更新迭代,往后大家或多或少都会接触到这个技能,因为在未来前端可视化必定会占有极其重要的地位,可视化应用场景应用模式也是千变万化,我将以最直观最简单的例子作为切入点,来带大家了解探究音频可视化到底是怎么实现的。​

前言

书接上文 [vue实现歌词滚动效果],既然有了歌词滚动那么今天给大家来个绝活——音频可视化。伴随着各种新技术的更新迭代,往后大家或多或少都会接触到这个技能,因为在未来前端可视化必定会占有极其重要的地位,可视化应用场景应用模式也是千变万化,我将以最直观最简单的例子作为切入点,来带大家了解探究音频可视化到底是怎么实现的。

一、音频可视化是什么?
​音频可视化,是指一种以视觉为核心,以音乐为载体,以大众为诉求对象,借助多种新媒体技术等传播媒介,通过画面、影像来诠释音乐内容的、视听结合的大众化传播方式。  它能为理解、分析和比较音乐艺术作品形态的表现力和内外部结构提供的一种直观视觉呈现的技术。

二、实现思路
1,创建音频上下文,音频源节点

2,创建分析器节点对音频进行分析,连接音频源节点和分析器,随着音乐进度变化,分析器不断的分析出结果

3,连接分析器反馈分析结果到输出设备,由输出设备渲染到canvas标签

至于分析器简单来说就是可以把音频时域图通过频谱分析转换为频谱图,这个转换的过程叫做频谱分析,频谱分析的方式有很多,最常见的是快速傅里叶变换,有兴趣的可以研究一下频谱分析(之前写的一些小dome),内部逻辑大家就没必要深究啦 !

三、实现代码
1.初始化canvas
代码如下(示例)



initCancas() { 
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d"); 
  ctx.fillRect(10, 10, 280, 130);
},

2,当音频播放时 初始化分析器
根据MDN的文档,AudioContext是一个专门用于音频处理的接口,并且工作原理是将AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经这些节点并作出相应处理。

AudioContext() 构造方法创建了一个新的 AudioContext 对象 它代表了一个由音频模块链接而成的音频处理图,每一个模块由 AudioNode 表示。

AudioContext的createAnalyser()方法能创建一个AnalyserNode,可以用来获取音频时间和频率数据,以及实现数据可视化。
f9439d6e5dfe4f2dac92845641a56783.png
f9439d6e5dfe4f2dac92845641a56783.png
e73612501df34ccc98149901017d8bec.png
5fa25bf25e1246c68a9a7e112f190151.png

onPlay() {

  if (this.isInit) {
    return;
  }
  let audioEle = document.getElementById("myAudio");
  //初始化
  var audCtx = new AudioContext(); //创建音频上下文
  this.analyser = audCtx.createAnalyser();
  const source = audCtx.createMediaElementSource(audioEle); //创建音频源节点
  this.analyser.fftSize = 512; //一个无符号长整形 (unsigned long) 的值,代表了快速傅里叶变换(分析器)的窗口大小
  //创建数组,用于接受节点分析器分析的数据
  this.dataArry = new Uint8Array(this.analyser.frequencyBinCount); //这里并不是声明一个普通数组,而是需要声明一个无符号的八位整数,刚好是一个字节。并且数组长度需要刚好等于频谱图横坐标长度
  source.connect(this.analyser);
  this.analyser.connect(audCtx.destination);

  this.isInit = true;
},

  

 

3.绘制分析器分析的结果数据
代码如下(示例):

//把分析器分析的数据不断绘制到canvas
draw() {
  let cvs = document.getElementById("myCanvas");
  let ctx = cvs.getContext("2d");
  requestAnimationFrame(this.draw);
  //清空画布
  const { width, height } = cvs;
  ctx.clearRect(0, 0, width, height);
  //判断分析器是否初始化
  if (!this.isInit) {
    return;
  }
  //分析器节点分析出数据到数组中
  this.analyser.getByteFrequencyData(this.dataArry); //让分析器节点分析当前音频源数据,把分析结果添加到数组
  const len = this.dataArry.length;
  const barWidth = width / len / 2;
  ctx.fillStyle = "#41b883";
  for (let i = 0; i < len; i++) {
    const data = this.dataArry[i]; //<256
    const barHeight = (data / 255) * height;
    const x1 = i * barWidth + width / 2;
    const x2 = width / 2 - (i + 1) * barWidth;
    const y = height - barHeight;
    ctx.fillRect(x1, y, barWidth, barHeight);
    ctx.fillRect(x2, y, barWidth, barHeight);
  }
},

window.requestAnimationFrame() 告诉浏览器,你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

备注: 若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用 window.requestAnimationFrame(callback)

兼容说明
由于是用的是实验API,此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
3ca95d3819b844428d17407f093a0fcf.png

 歌词滚动+音频可视化全部代码

{{ dataWords }}
<canvas
  id="myCanvas"
  style="width: 600px; height: 100px"
>
</canvas>


return {
  isInit: false,
  className: "text load",
  lrcTime: "",
  music,
  currenttime: "",
  LRC: `[00:00.000] 作词 : 周耀辉/李焯雄

[00:01.000] 作曲 : 林健华
[00:02.000] 编曲 : 林健华
[00:15.000]忽然之间
[00:18.000]天昏地暗
[00:21.000]世界可以忽然什么都没有
[00:28.000]我想起了你
[00:32.000]再想到自己
[00:35.000]我为什么总在非常脆弱的时候
[00:40.000]怀念你
[00:43.000]''
[00:44.000]我明白太放不开你的爱
[00:49.000]太熟悉你的关怀分不开
[00:54.000]想你算是安慰还是悲哀
[00:58.000]而现在就算时针都停摆
[01:03.000]就算生命像尘埃分不开
[01:08.000]我们也许反而更相信爱
[01:24.000]''
[01:25.000]如果这天地
[01:29.000]最终会消失
[01:32.000]不想一路走来珍惜的回忆
[01:38.000]没有你
[01:40.000]''
[01:41.000]我明白太放不开你的爱
[01:46.000]太熟悉你的关怀分不开
[01:51.000]想你算是安慰还是悲哀
[01:55.000]而现在就算时针都停摆
[02:00.000]就算生命像尘埃分不开
[02:05.000]我们也许反而更相信爱
[02:34.000]''
[02:35.000]我明白太放不开你的爱
[02:40.000]太熟悉你的关怀分不开
[02:45.000]想你算是安慰还是悲哀
[02:49.000]而现在就算时针都停摆
[02:54.000]就算生命像尘埃分不开
[03:00.000]我们也许反而更相信爱`,

  lrcData: "",
  dataWords: "",

  analyser: {},
  dataArry: [],
};

},
name: "HelloWorld",
methods: {

// 当音频播放
onPlay() {
  if (this.isInit) {
    return;
  }
  let audioEle = document.getElementById("myAudio");
  //初始化
  var audCtx = new AudioContext(); //创建音频上下文
  this.analyser = audCtx.createAnalyser();
  const source = audCtx.createMediaElementSource(audioEle); //创建音频源节点
  this.analyser.fftSize = 512; //一个无符号长整形 (unsigned long) 的值,代表了快速傅里叶变换(分析器)的窗口大小
  //创建数组,用于接受节点分析器分析的数据
  this.dataArry = new Uint8Array(this.analyser.frequencyBinCount); //这里并不是声明一个普通数组,而是需要声明一个无符号的八位整数,刚好是一个字节。并且数组长度需要刚好等于频谱图横坐标长度
  source.connect(this.analyser);
  this.analyser.connect(audCtx.destination);

  this.isInit = true;
},
//把分析器分析的数据不断绘制到canvas
draw() {
  let cvs = document.getElementById("myCanvas");
  let ctx = cvs.getContext("2d");
  requestAnimationFrame(this.draw);
  //清空画布
  const { width, height } = cvs;
  ctx.clearRect(0, 0, width, height);
  //判断分析器是否初始化
  if (!this.isInit) {
    return;
  }
  //分析器节点分析出数据到数组中
  this.analyser.getByteFrequencyData(this.dataArry); //让分析器节点分析当前音频源数据,把分析结果添加到数组
  const len = this.dataArry.length;
  const barWidth = width / len / 2;
  ctx.fillStyle = "#41b883";
  for (let i = 0; i < len; i++) {
    const data = this.dataArry[i]; //<256
    const barHeight = (data / 255) * height;
    const x1 = i * barWidth + width / 2;
    const x2 = width / 2 - (i + 1) * barWidth;
    const y = height - barHeight;
    ctx.fillRect(x1, y, barWidth, barHeight);
    ctx.fillRect(x2, y, barWidth, barHeight);
  }
},
initCancas() {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  // ctx.fillStyle = "#000";
  ctx.fillRect(10, 10, 280, 100);
},
//歌词数据转化为数组
formatLrc() {
  var strLrc = this.LRC.split("\n");
  let arr = [];
  for (var i = 0; i < strLrc.length; i++) {
    var str = strLrc[i];
    var parts = str.split("]");
    var timeStr = parts[0].substring(1);
    var obj = {
      time: this.formatTime(timeStr),
      words: parts[1],
    };
    arr.push(obj);
  }
  this.lrcData = arr;
},
//时间转换(秒)
formatTime(time) {
  var parts = time.split(":"); //[03:00.000]==>[03,00.00]
  return +parts[0] * 60 + +parts[1]; //计算秒
},
audioTime(e) {
  var time = e.target.currentTime; //当前播放器时间
  for (var i = 0; i < this.lrcData.length; i++) {
    if (time < this.lrcData[i].time) {
      //循环歌词数组,当播放器当前时间第一次小于歌词时间时当前数组下标减一即为当前时间数组所对应歌词下标
      this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;
      this.dataWords = this.lrcData[i - 1].words;
      return i - 1;
    }
  }
},

},
watch: {

dataWords() {
  this.className = "text";
  setTimeout(() => {
    this.className = "text load";
  }, 40);
},

},
mounted() {

this.formatLrc();
this.initCancas();
this.draw();

},
};

background-size: 0 100%;

}
100% {

background-size: 100% 100%;

}
}
.text {
background: #7e7e7e -webkit-linear-gradient(left, #76ca16, #0fa046) no-repeat 0

0;

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
}
.load {
background-size: 100% 100%;
animation: scan linear;
}

总结
以上就是今天要讲的内容,本文仅仅简单介绍了音频可视化的实现,而MDN为我们提供了大量新的API,能实现的东西远不局限于音频可视化,大家可以发挥想象力和创造力,去实现更华丽的功能。

目录
相关文章
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
14天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
14天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex