vue3+ts 实现点击图标播放/暂停音频

最新推荐文章于 2025-05-08 10:24:32 发布

南下何下南

最新推荐文章于 2025-05-08 10:24:32 发布

阅读量195

点赞数 2

文章标签：音视频 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_62442040/article/details/145286311

版权

默认状态/暂停状态

点击图标后 --- 播放状态

功能点：点击图标可暂停/播放，离开当前页面暂停播放

<div class="top-content">
    <el-row :gutter="20">
        <el-col class="mb40" :span="6" v-for="(item, index) in picList" :key="index"                       
             @click="chooseAudio(item, index)">
            <div
              class="audio-item"
              :class="{
                'hover-card': selectedIndex !== index,
                'selected-card': selectedIndex === index
              }"
            >
              <div style="display: flex; align-items: center">
                <img :src="item.photoUrl" class="avatar" />
                <div style="margin-left: 10px">
                  <div class="name">{
  
  { item.name }}</div>
                  <div class="time">创建时间：{
  
  { item.createTime }}</div>
                </div>
              </div>
              <!-- 动态切换图标 -->
              <div class="play-icon" @click.stop="playAudio(index)">
                <el-icon size="40" v-if="playingIndex === index"><Headset /></el-icon>
                <el-icon size="40" v-else><VideoPlay /></el-icon>
              </div>
              <audio ref="audioRefs" :src="item.initAudioUrl"></audio>
            </div>
     </el-col>
  </el-row>
</div>

const selectedIndex = ref<number | null>(null);
const playingIndex = ref<number | null>(null); // 记录当前正在播放的音频索引
// 选择音频条目
const chooseAudio = (e: any, index: number) => {
  selectedIndex.value = index;
};

// 切换音频播放/暂停
const playAudio = (index: number) => {
  const audioElements = document.querySelectorAll<HTMLAudioElement>("audio");
  const audioElement = audioElements[index];

  if (!audioElement) {
    console.error("未找到对应的音频元素");
    return;
  }

  if (playingIndex.value === index) {
    // 如果当前正在播放的音频再次点击则暂停
    audioElement.pause();
    playingIndex.value = null;
  } else {
    // 如果切换到其他音频
    if (playingIndex.value !== null) {
      const previousAudio = audioElements[playingIndex.value];
      previousAudio.pause();
      previousAudio.currentTime = 0; // 重置上一个音频
    }

    // 播放当前音频
    audioElement.play();
    playingIndex.value = index;
  }
};

// 离开页面前停止所有音频播放
onBeforeUnmount(() => {
  const audioElements = document.querySelectorAll<HTMLAudioElement>("audio");
  audioElements.forEach(audio => {
    audio.pause();
    audio.currentTime = 0; // 重置播放时间
  });
});

.selected-card {
  border: 1px solid red !important;
}
.hover-card:hover {
  border: 1px solid black;
}
.audio-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  transition: 0.3s;
}
.audio-item:hover {
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.name {
  margin-bottom: 5px;
  font-weight: bold;
}
.time {
  font-size: 14px;
  color: #999999;
}
.play-icon {
  font-size: 20px;
  color: orange;
  cursor: pointer;
}