音波音频播放器

<template>

  <div class="waveContainer">

    <div ref="waveformDom">

    </div>

    <div>

      <div class="controlBtn">

        <el-icon class="aplayer-icon-play" v-if="isPlay" @click="toggleAudio(1)" >

          <VideoPause />

        </el-icon>

        <el-icon class="aplayer-icon-play" v-else @click="toggleAudio(2)">

          <VideoPlay />

        </el-icon>

        <el-icon class="aplayer-icon-play" @click="toggleAudio(3)">

          <RefreshRight />

        </el-icon>

      </div>

    </div>

  </div>

</template>

<script lang="ts" setup>

import $waveSurfer from "wavesurfer.js";

import audioFilePath from "./source/audio1.wav";

import { ref, onMounted, nextTick, computed, watch } from "vue";

import markers from "wavesurfer.js/dist/plugin/wavesurfer.markers.js";

import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";

import { VideoPlay, RefreshRight, VideoPause } from "@element-plus/icons-vue";

import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";



let isPlay = ref(false)

const waveformDom = ref(null);

let wavesurfer = ref(null);

const handleInitAudio = (audioFilePath, height = 150) => {

  wavesurfer.value && wavesurfer.value.destroy();

  nextTick(() => {

    wavesurfer.value = $waveSurfer.create({

      container: waveformDom.value,

      height,

      barWidth: 1,

      // 播放进度光标条的颜色

      // cursorColor: "#ff5367",

      // 已播放波形的颜色

      progressColor: "#86cbe7",

      waveColor: "#28a8de",

      //  波形容器的背景颜色

      backgroundColor: "#00090a",

      // blackend: "midiaElement",

      // 音频的播放速度

      audioRate: "1",

      //滚动条

      scrollParent: false,

      // 波形的振幅（高度），默认为1

      barHeight: 4,

      plugins: [

        // 插件--区域的配置

        RegionsPlugin.create({

          regionsMinLength: 1,

          regions: [

            {

              start: 0.1,

              end: 0.2,

              loop: false,

              // drag: true,// 是否可拖拽

              resize: true,// 是否可改变大小

              color: "hsla(200, 50%, 70%, 0.4)",

              minLength: 0.1,

              maxLength: 1

            }

            // {

            //   start: 0.5,

            //   end: 0.7,

            //   loop: false,

            //   color: "hsl(121,93%,49%)",

            //   minLength: 1,

            //   maxLength: 5

            // }

          ],

          dragSelection: {

            slop: 5

          }

        }),

        // Timeline.create({

        //   container:waveformDom.value,

        //   fontSize: 14,

        //   //主要时间标签颜色

        //   primaryColor: "#9191a5",

        //   //主要时间文字颜色

        //   primaryFontColor: "#9191a5",

        //   //次要时间标签颜色

        //   secondaryColor: "#9191a5",

        //   //次要时间文字颜色

        //   secondaryFontColor: "#9191a5",

        // }),

      ]

    });

    wavesurfer.value.load(audioFilePath);

    wavesurfer.value.on("error", () => {

      // $message.warning({

      //   message: "语音文件不存在或出错！",

      //   type: "warning",

      //   duration: 1000,

      // });

    });

    wavesurfer.value.on("ready", () => {

      console.log("开始播放音频");

      wavesurfer.value.play();

      isPlay.value = true;

    });

    wavesurfer.value.on("finish", () => {

      isPlay.value = false;

    });

  });

};



const toggleAudio = (num) => {

  if (num == 1) {

    isPlay.value = !isPlay.value;

    wavesurfer.value.pause();

  } else if (num == 2) {

    isPlay.value = !isPlay.value;

    wavesurfer.value.play();

  } else if (num == 3) {

    isPlay.value = true;

    wavesurfer.value.play(0);

  }

};

onMounted(() => {

  handleInitAudio(audioFilePath, 80);

});

</script>

<style scoped lang="scss">

.waveContainer {

  flex: 1;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: center;

  position: relative;

  width: 70%;



  .controlBtn {

    text-align: center;

    .aplayer-icon-play {

      font-size: 25px;

      color: #409eff;

      cursor: pointer;

      margin: 10px 10px;

      text-align: center;

      justify-content: center;

      align-items: center;

    }

  }



}

</style>