微信小程序音频可视化

C_阿乐

已于 2024-10-29 15:55:30 修改

阅读量1k

点赞数

分类专栏：小程序文章标签：微信小程序音视频小程序

于 2023-08-17 12:52:56 首次发布

本文链接：https://blog.csdn.net/weixin_45806357/article/details/132337995

版权

小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在微信小程序中进行音频可视化的实现过程，包括创建DOM节点、定义变量、获取canvas节点、控制音谱播放与暂停，以及结合视频实现音谱可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序音频可视化，音谱，音频图

一：先上效果,底部有视频效果
播放时跳动样式

二：先写dom

<view class="canvasBox">
   <canvas id="waveCanvas" type="2d"></canvas>
  </view>
 <view>
    <button type="primary" size="mini" @tap="playVoice()">播放</button>
    <button type="warn" size="mini" @tap="pauseVoice()">暂停</button>
 </view>
 // style样式
 .canvasBox {
	  background-color: #bbb;
	  canvas{
	    width: 100%;
	    height: 150px;
	  }
	}

三：定义变量

// 要操作的元素
  cvs:any = null; // canvas
  ctx:any = null;  // canvas2D

  isInit = false;  // 是否已初始化
  dataArray:any; // 数组，用于接收分析器节点的分析数据
  analyser:any ; // 分析器节点

  audioCtxThis:any=null; // 创建音频上下文
  sourceThis:any=null; //   创建音频源节点
  stateVoice:any = null; // 播放状态

四：在页面或组件生命周期中获取dom节点canvas 设置在变量上

mounted() {
    this.$nextTick(()=>{  // 可以不nexttick的，只是怕有mounted后不执行的情况

      // 获取canvas  注意这里 in(this)，在组件中不写in(this) 无法获取dom哦
      wx.createSelectorQuery().in(this).select("#waveCanvas").fields({
        node: true,
        size: true
      }).exec((res:any)=>{
        const myCanvas = res[0].node;
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取像素
        this.cvs = myCanvas
        this.ctx = myCanvas.getContext('2d')

        this.cvs.width= res[0].width * dpr;  // 设置宽高
        this.cvs.height= res[0].height * dpr;

        this.draw()
      });
    })
  }

五：创建音谱节点、并播放、暂停

// 播放事件
playVoice(){}
// 暂停事件
pauseVoice(){}

六:视频效果

音谱可视化播放视频

到此结束，