ai-meeting/src/modules/meeting-detail/record-detail/AudioPlayer.vue

<template>
  <div class="audio-player">
    <!-- 播放器顶部显示标题 -->
    <!-- <div class="audio-title">音频播放: 12月24日录音</div> -->

    <!-- 音频控制区 -->
    <div class="audio-progress">
      <div class="time">{{ formatTime(currentTime) }}</div>
      <!-- 音频进度条 -->
      <div
        class="progress-bar"
        @mousedown="startDragging"
        @mousemove="dragProgress"
        @mouseup="endDragging"
        @mouseleave="endDragging"
        ref="progressBar"
      >
        <!-- 拖动节点 -->
        <div class="progress-node" :style="{ left: `${progress}%` }"></div>
        <div class="progress" :style="{ width: `${progress}%` }"></div>
      </div>

      <!-- 音频总时长 -->
      <div class="time">{{ formatTime(duration) }}</div>
    </div>

    <!-- 播放/暂停按钮 -->
    <div class="audio-controls">
      <!-- 倍速按钮 -->
      <div class="speed-button" @click="toggleSpeed">{{ speedBtn }}&nbsp;x</div>

      <!-- 快进/快退按钮 -->
      <div class="play-controls">
        <img src="../../../assets/image/home/fast_back.png" class="seek-button" @click="seek(-10)" />
        <div class="play-button" @click="togglePlay">
          <icon-pause-circle class="icon-play" v-if="isPlaying" />
          <icon-play-circle-fill class="icon-play" v-else />
        </div>
        <img src="../../../assets/image/home/fast_back.png" class="seek-button" @click="seek(10)" />
      </div>
      <div class="setting-button">
        <img class="setting-icon" @click="handleHotClick" src="../../../assets/image/home/hot.png" />
        <!-- <img class="setting-icon" @click="handleSettingClick" src="../../assets/image/home/settings.png" /> -->
        <AudioSetting></AudioSetting>
      </div>
    </div>
  </div>
  <ModelHot v-if="show_hot" :visible.async="show_hot" @close="cancelModelHot"></ModelHot>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { formatTime } from '../../../utils/format';
import ModelHot from './ModelHot.vue';
import AudioSetting from './AudioSetting.vue';

const props = defineProps({
  audio_player_url: {
    type: String,
    default: ''
  }
});
// 音频相关状态
const audio = ref(null); // 音频对象
const isPlaying = ref(false); // 是否正在播放
const currentTime = ref(0); // 当前播放时间
const duration = ref(0); // 音频总时长
const isDragging = ref(false); // 是否正在拖动进度条
const progressBar = ref(null); // 进度条 DOM 引用
const speed = ref(1); // 播放速度（1x，1.5x，2x等）

// 热词优化
const show_hot = ref(false);

// 进度条的百分比宽度
const progress = computed(() => {
  return duration.value ? (currentTime.value / duration.value) * 100 : 0;
});
const speedBtn = computed(() => {
  return speed.value.toFixed(1);
});

// 初始化音频
onMounted(() => {
  // audio.value = new Audio('https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3');
  // console.log('props.audio_player_url', props.audio_player_url);
  audio.value = new Audio();
  audio.value.src = props.audio_player_url; // 设置音频源
  audio.value.load();
  // console.log('audio.value', audio.value);
  audio.value.addEventListener('timeupdate', updateTime);
  audio.value.addEventListener('loadedmetadata', updateDuration);
  audio.value.addEventListener('ended', onAudioEnded); // 添加监听播放结束事件
  audio.value.playbackRate = speed.value; // 设置初始播放速度
  audio.value.addEventListener('loadeddata', () => {
    console.log('Audio file loaded successfully');
  });

  audio.value.addEventListener('error', (e) => {
    console.error('Error loading audio:', e);
  });
});

// 播放/暂停切换
const togglePlay = () => {
  if (isPlaying.value) {
    audio.value.pause();
  } else {
    audio.value.play();
  }
  isPlaying.value = !isPlaying.value;
};

// 更新当前播放时间
const updateTime = () => {
  if (!isDragging.value) {
    currentTime.value = audio.value.currentTime;
  }
};

// 更新音频总时长
const updateDuration = () => {
  duration.value = audio.value.duration;
};

// 开始拖动进度条
const startDragging = (event) => {
  isDragging.value = true;
  setProgress(event);
};

// 拖动过程中更新进度条
const dragProgress = (event) => {
  if (isDragging.value) {
    setProgress(event);
    // 实时更新音频播放时间
    audio.value.currentTime = currentTime.value;
  }
};

// 结束拖动进度条
const endDragging = (event) => {
  if (isDragging.value) {
    setProgress(event);
    // 在拖动结束时，更新音频的播放时间
    audio.value.currentTime = currentTime.value;
    isDragging.value = false;
  }
};

// 根据鼠标位置更新进度
const setProgress = (event) => {
  const rect = progressBar.value.getBoundingClientRect();
  const offsetX = event.clientX - rect.left;
  const width = rect.width;
  const percentage = Math.min(Math.max(offsetX / width, 0), 1);
  currentTime.value = percentage * duration.value;
};

// 切换播放速度
const toggleSpeed = () => {
  if (speed.value === 1) {
    speed.value = 1.5;
  } else if (speed.value === 1.5) {
    speed.value = 2;
  } else {
    speed.value = 1;
  }
  audio.value.playbackRate = speed.value; // 更新播放速度
};

// 快进/快退功能
const seek = (time) => {
  const newTime = currentTime.value + time;
  // 确保时间不会小于0且不超过总时长
  currentTime.value = Math.max(0, Math.min(newTime, duration.value));
  audio.value.currentTime = currentTime.value;
};

// 播放结束处理
const onAudioEnded = () => {
  isPlaying.value = false; // 播放结束时更新按钮状态
  currentTime.value = 0; // 重置播放时间
};
// 打开热词配置
const handleHotClick = () => {
  show_hot.value = true;
};

// 关闭热词配置
const cancelModelHot = () => {
  show_hot.value = false;
};

onBeforeUnmount(() => {
  audio.value.pause();
  audio.value.removeEventListener('timeupdate', updateTime);
  audio.value.removeEventListener('loadedmetadata', updateDuration);
  audio.value.removeEventListener('ended', onAudioEnded); // 移除事件监听
});
</script>

<style scoped>
.audio-player {
  width: 100%;
  border-radius: 10px;
  padding: 16px;
  background-color: var(--bg-body-color);
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

.audio-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.audio-progress {
  display: flex;
  align-items: center;
  gap: 20px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.progress {
  height: 100%;
  background-color: #ffb124;
  transition: width 0.2s ease;
}

.progress-node {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  background-color: #ffb124;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: left 0.2s ease;
  z-index: 10;
}

.time {
  font-size: 14px;
  color: #666;
}
.audio-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.play-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-button {
  /* background-color: #007bff; */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .icon-play {
    font-size: 32px;
    color: #007bff;
  }
}

.speed-button {
  font-size: 18px;
  font-weight: 600;
  color: #868686;
  border: none;
  border-radius: 5px;

  cursor: pointer;
}

.seek-button {
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}
.setting-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.setting-icon {
  cursor: pointer;
}
</style>