利用canvas绘制音频波浪动画

[Audio音频波浪动画js插件]

先看一下最终的效果

1.前期准备

使用 siriwave.js 绘制，github 仓库地址为: github.com/thecreazy/s…

2. 代码事项

<div id="container" style="width: 900px; height: 400px; background: #000"></div>

 var instance = new SiriWave({
   style: 'default',  //  default  ios9
   speed: 0.02,  //  速度
   amplitude: 0.1,  //  幅度
   color: '#00ff00',  //  颜色
   speedInterpolationSpeed: 0,
   frequency: 6,  //  波段数
   height: 400,
   width: 900,
   container: document.getElementById('container'),  //  渲染到指定DOM元素
   autostart: false,  //  自动播放
 });

 let startId = null
 let stopId = null
 let mySpeed = 0.02
 let myAmplitude = 0.1

 setTimeout(() => {
   instance.start()

   mySpeed = 0.02
   myAmplitude = 0.1
 clearInterval(stopId)
   startId = setInterval(() => {
     if (mySpeed < 0.1) {
       mySpeed += 0.005
     }
     if (myAmplitude < 0.4) {
       myAmplitude += 0.01
     }
     instance.setSpeed(mySpeed)
     instance.setAmplitude(myAmplitude)
     if (mySpeed >= 0.1 && myAmplitude >= 0.4) {
       clearInterval(startId)
     }
   }, 200)
 }, 500)


setTimeout(() => {
   let mySpeed2 = mySpeed
   let myAmplitude2 = myAmplitude
   clearInterval(startId)
   stopId = setInterval(() => {
     if (mySpeed2 > 0.02) {
       mySpeed2 -= 0.005
     }
     if (myAmplitude2 > 0) {
       myAmplitude2 -= 0.01
     }
     instance.setSpeed(mySpeed2)
     instance.setAmplitude(myAmplitude2)
     if (myAmplitude2 <= 0) {
       clearInterval(stopId)
     }
   }, 60)

 setTimeout(() => {
     instance.setSpeed(0)
     instance.setAmplitude(0)
     clearInterval(stopId)
     setTimeout(() => instance.stop(), 100)
 }, 2000)
}, 10000)

补充

效果图因为是 gif 录制的，帧率只有 10 fps ,真实的效果是要好很多的。