用web audio api 在canvas上画出音频的音轨

-转角的夏天-

已于 2022-10-17 17:04:32 修改

阅读量940

点赞数

分类专栏： JavaScript 文章标签：音视频

于 2022-10-17 16:54:21 首次发布

本文链接：https://blog.csdn.net/srj15110129498/article/details/127363547

版权

本文介绍如何利用Web Audio API在HTML Canvas上绘制音频的音轨，适用于音频选段展示的需求。首先设置HTML结构和背景色，然后通过API绘制音轨，最终实现音频波形的可视化。代码实现简洁，可根据具体场景进行拓展。

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

上一篇讲了一下如何用web audio api实现播放，这一篇讲一下如何画音轨吧😄

最近做的功能中包含音频选段，自然就少不了需要展示出音频的音轨

话不多说，就直接开始代码实现画出如图中所示的音轨吧

html 结构大概是这样，可根据需求调整；

<div class="audio-track">
  <div class="audio-track-scroll">
     <div class="audio-track-canvas" ref="audioTrack"></div>
  </div>
</div>

首先添加一个显示的背景色

addAudioTrackBg() {
  const bgColor = 'linear-gradient(270deg, #A282FF 0.15%, #4AC9FF 37.07%, #479CFF 66.72%, #C377FF 100%)'
  const bgDom = document.createElement('div')
  this.setElementStyle(bgDom.style, {
       width: '100%', 
       height: '100%', 
       position: 'absolute',
       left: