音频可视化 audio-visualization-pro

简介

audio-visualization-pro 是针对 audio-visualization开源的强化版本,通过 WEB-AUDIO-API 实现的实现的音乐可视化的库，通过本库你可以获取到当前音频的音频频谱，并在原作者基础上强化了创建、暂停、销毁等实例方法并提供相应的 API 方法

链接

github地址
audio-visualization-pro 个人站点

安装

npm install audio-visualization-pro   
yarn add audio-visualization-pro   
pnpm install audio-visualization-pro   

方法

| 方法 | 注释 | | ------------------------------------------------ | ------------------------------------------------------------ | | AudioVisualizationPro(url:string,loop:booler) | 实例化API | | setFftSzie(int) | 音频振幅常用32、64、128、512（等倍数定义） | | play(({frequency, currentTime, audiostate})=>{}) | 播放，包含回到函数 frequency 音频振幅数组 Array[number]、currentTime播放的进度、audiostate播放状态 1播放、0停止 | | suspend() | 暂停播放 | | destroy() | 销毁当前实例，可重新创建新的音乐可视化实例 |

效果

示例

vue2.0

<template>
  <div id="app">
    <div class="titleContainer">音频可视化</div>
    <div class="echartsContainer" id="echartsContainer"></div>
    <!-- 控制器 -->
    <div class="controllerContainer">
      <div @click="audioPlay(1)">播放</div>
      <div @click="audioPlay(0)">暂停</div>
      <div @click="destruction()">销毁实例重新创建</div>
    </div>
  </div>
</template>

<script>
import "audio-visualization-pro"
export default {
  name: 'App',
  components: {
    
  },
  data(){
    return {
      AVP:null
    }
  },
  mounted(){
    this.createVisualization();
  },
  methods:{
    /**初始化实例 */
    createVisualization(){
      this.AVP = new window.AudioVisualizationPro({
        url:require("./assets/audio.mp3"),
        loop:false
      })
    },
    /**播放&暂停 */
    audioPlay(type){
      if(type){
        this.AVP.play(({frequency})=>{
          this.createEcharts([...Array.from(frequency).reverse(), ...frequency])
        })
      }else{
        this.AVP.suspend()
      }
    },
    /*销毁实例*/
    destruction(){
      if(this.AVP){
        this.AVP.destroy();
        this.AVP = null;
        this.createVisualization()
      }
    },
    /*图表*/
	createEcharts(data){}
  }
}
</script>

vue3.0

<template>
  <div id="app">
    <div class="titleContainer">音频可视化</div>
    <div class="echartsContainer" id="echartsContainer"></div>
    <!-- 控制器 -->
    <div class="controllerContainer">
      <div @click="audioPlay(1)">播放</div>
      <div @click="audioPlay(0)">暂停</div>
      <div @click="destruction()">销毁实例重新创建</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import "audio-visualization-pro"
import { onMounted } from "vue";
import audioAssets from "./assets/audio.mp3";

  onMounted(()=>{
    createVisualization()
  })

  let AVP:any = null;
  /**初始化实例 */
  const createVisualization = ()=>{
    AVP = new (window as any).AudioVisualizationPro({
      url:audioAssets,
      loop:false
    })
  };
  /**播放&暂停 */
  const audioPlay = (type:number)=>{
    if(type){
      // currentTime . audiostate
      AVP.play(({frequency}:any)=>{
        createEcharts([...Array.from(frequency).reverse(), ...frequency])
      })
    }else{
      AVP.suspend()
    }
  };
  /*销毁实例*/
  const destruction = ()=>{
    if(AVP){
      AVP.destroy();
      AVP = null;
      createVisualization()
    }
  };
  /**实例化Echarts */
  const createEcharts = (data:any)=>{}


</script>

react

import './App.css'
import "audio-visualization-pro"
import audioAssets from "./assets/audio.mp3"

const App:React.FC<any> = ()=>{

  useEffect(()=>{
    createVisualization()
  })

  let AVP:any = null;
  /**初始化实例 */
  const createVisualization = ()=>{
    AVP = new (window as any).AudioVisualizationPro({
      url:audioAssets,
      loop:false
    })
  };
  /**播放&暂停 */
  const audioPlay = (type:number)=>{
    if(type){
      // currentTime . audiostate
      AVP.play(({frequency}:any)=>{
        createEcharts([...Array.from(frequency).reverse(), ...frequency])
      })
    }else{
      AVP.suspend()
    }
  };
  /*销毁实例*/
  const destruction = ()=>{
    if(AVP){
      AVP.destroy();
      AVP = null;
      createVisualization()
    }
  };
  /**实例化Echarts */
  const createEcharts = (data:any)=>{};


  return (
    <div className="app">
      <div className="titleContainer">音频可视化</div>
      <div className="echartsContainer" id="echartsContainer"></div>
      <div className="controllerContainer">
        <div onClick={()=>audioPlay(1)}>播放</div>
        <div onClick={()=>audioPlay(0)}>暂停</div>
        <div onClick={()=>destruction()}>销毁实例重新创建</div>
      </div>
    </div>
  )
}

export default App