vue3中使用howler播放音频列表

1. 安装howler

pnpm install howler

2.页面引用

import { Howl, Howler } from 'howler';

3.创建页面

<div class="audio-list">
        <div
          class="item"
          v-for="(item,index) in audioList.list"
          :key="item.id"
        >
          <div
            v-if="item.playAudioState=='loaded' && item.canPause"
            class="left-btn"
            @click="() => pauseAudio(item)"
          >
            <img :src="pauseIcon" />
          </div>
          <div
            v-else
            class="left-btn"
            @click="() => playAudio(item)"
          >
            <img :src="playIcon" />
          </div>
          <div class="right-info">
            <p class="title">{{index+1}}.{{item.title}}</p>
            <div class="progress">
              <!-- <div class="progress-outer">
                <div class="progress-inner"></div>
              </div> -->
              <van-progress
                :ref="'progress'+index"
                :key="index"
                :id="index"
                class="progress-outer"
                :show-pivot="false"
                :percentage="item.currentTime?(item.currentTime/item.totalTime)*100:0"
              />
              <div class="time">{{item.totalTime?item.currentTimeText+'/'+item.totalTimeText:''}}</div>
            </div>
          </div>
        </div>
      </div>

4.变量和方法：

const audioList = reactive({ list: [] });
// list中item的字段
// totalTime 总时长
// currentTime 已播放时长
// totalTimeText  总时长的显示（'00:00'）
// currentTimeText  已播放时长的显示
// playAudioState  状态
// canPause 是否可以暂停
// timer 计时器

let audioPlayer = null; // 播放器

const playAudio = (audioObject) => {
  let isPlaying = audioPlayer && audioPlayer.playing();
  if (isPlaying) {
    // 其他音频正在播放

    setTimeout(() => {
      if (audioPlayer) {
        audioPlayer.unload();
        audioPlayer = null;
      }
      // 其他音频置0
      audioList.list.forEach((audio) => {
        audio.currentTime = 0;
        audio.currentTimeText = formatAudioTime(0);
        audio.canPause = false;
        audio.playAudioState = '';
      });
      let urlhead = import.meta.env.PUBLIC_API_BASE_URL;
      let audioUrl =
        urlhead +
        'xxxx' +
        encodeURIComponent(audioObject.id); // 播放路径
      audioPlayer = new Howl({
        src: audioUrl,
        format: ['wav', 'mp3'],
        autoplay: true,
        loop: false,
        onload() {
          console.log('onload-111');
          if (audioPlayer) {
            const total = audioPlayer.duration();
            audioObject.totalTime = total;
            audioObject.totalTimeText = formatAudioTime(total);
            audioObject.playAudioState = audioPlayer.state();
          }
        },
        onloaderror(id, error) {
          audioObject.playAudioState = 'unloaded';
          Toast.fail('音频加载失败！');
        },
        onplay() {
          audioObject.canPause = true;
          audioObject.timer = setInterval(() => {
            const currentTime = audioPlayer.seek();
            audioObject.currentTime = currentTime;
            audioObject.currentTimeText = formatAudioTime(currentTime);
          }, 100);
          if (audioPlayer) {
            audioObject.playAudioState = audioPlayer.state();
          }
        },
        onstop() {
          clearInterval(audioObject.timer);
          audioObject.canPause = false;
          audioObject.currentTime = 0;
          audioObject.currentTimeText = formatAudioTime(0);
          audioObject.playAudioState = '';

        },
        onpause() {
          clearInterval(audioObject.timer);
          audioObject.canPause = false;
        },
        onend: function () {

        },
      });

      audioPlayer.load();
    }, 1000);
  } else {
    //检查是不是当期音频正在播放

    if (
      audioObject.currentTime !== 0 &&
      audioObject.playAudioState == 'loaded' &&
      audioPlayer &&
      !audioObject.canPause
    ) {
      //继续播放

      audioObject.canPause = false;
      audioPlayer.play();
    } else {
      // 新的播放

      if (audioPlayer) {
        audioPlayer.unload();
        audioPlayer = null;
      }
      // 其他音频置0
      audioList.list.forEach((audio) => {
        audio.currentTime = 0;
        audio.currentTimeText = formatAudioTime(0);
        audio.canPause = false;
        audio.playAudioState = '';
      });
      let urlhead = import.meta.env.PUBLIC_API_BASE_URL;
      let audioUrl =
        urlhead + 'xxxx' + audioObject.id; // 文件路径
      audioPlayer = new Howl({
        src: audioUrl,
        format: ['wav', 'mp3'],
        autoplay: true,
        loop: false,
        onload() {
          const total = audioPlayer.duration();
          audioObject.totalTime = total;
          audioObject.totalTimeText = formatAudioTime(total);
          audioObject.playAudioState = audioPlayer.state();
          audioObject.canPause = true;
        },
        onloaderror(id, error) {
          audioObject.playAudioState = 'unloaded';
          Toast.fail('音频加载失败！');
        },
        onplay() {
          console.log('onplay');
          audioObject.canPause = true;
          audioObject.timer = setInterval(() => {
            const currentTime = audioPlayer.seek();
            // console.log('当前时间:', currentTime); // 在此处更新 UI，例如进度条
            audioObject.currentTime = currentTime;
            audioObject.currentTimeText = formatAudioTime(currentTime);
          }, 100); // 每0.1秒更新一次
          audioObject.playAudioState = audioPlayer.state();
        },
        onstop() {
          clearInterval(audioObject.timer);
          // 停止时，不需要到返回未播放状态
          audioObject.canPause = false;
          audioObject.currentTime = 0;
          audioObject.currentTimeText = formatAudioTime(0);
          audioObject.playAudioState = '';

        },
        onpause() {
          clearInterval(audioObject.timer);
          audioObject.canPause = false;
        },
        onend: function () {

        },
      });

      audioPlayer.load();
    }
  }
};

const pauseAudio = (item) => {
  item.canPause = false;
  audioPlayer.pause();
  console.log('pause--Audio');
};