表格自定义音频播放组件

最新推荐文章于 2024-07-19 13:24:27 发布



最新推荐文章于 2024-07-19 13:24:27 发布

阅读量198

点赞数 1

文章标签：音视频 java 前端

本文链接：https://blog.csdn.net/weixin_53954018/article/details/136401093

版权

文章介绍了如何在项目中导入并使用Audiosvue组件，展示了一个包含音频文件处理、播放/暂停功能以及实时时间进度条的示例，展示了音频控制组件的实现细节。

摘要由CSDN通过智能技术生成

1.在使用的地方调用

 <Audiosvue  ref="audio" class="audio-box" :audioFile="item.cont"></Audiosvue>

2.引入组件

import Audiosvue from "@/components/audio";

3.组件

<template>
  <div>
    <div style="display: flex;align-items: center;">
      <input type="range" v-model="progress" min="0" max="100" step="0.1" @input="updateAudioTime"  class="inputStyle">
      <span style="width: 100px;display: block;">{{ currentTime }} / {{ totalTime }}</span>
      <button @click="playPauseAudio">{{ isPlaying ? '暂停' : '播放' }}</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    audioFile: {
      type: String,
    },
  },
  data() {
    return {
      audio: null,
      isPlaying: false,
      currentTime: '00:00',
      totalTime: '00:00',
      progress: 0,
      isDragging: false
    };
  },

  computed: {

  },
  mounted() {
    // this.fetch();
  },
  created() {
   // 创建 Audio 对象
   this.audio = new Audio(this.audioFile);

// 监听时间更新事件
this.audio.addEventListener('timeupdate', this.updateTimeAndProgressBar);
  },
  methods: {
    playPauseAudio() {
      if (this.isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    updateAudioTime() {
      const currentTime = (this.progress / 100) * this.audio.duration;
      this.audio.currentTime = currentTime;

      if (!this.isDragging) {
        this.updateTimeAndProgressBar();
      }
    },
    updateTimeAndProgressBar() {
      const currentTime = this.audio.currentTime;
      const totalTime = this.audio.duration;

      this.currentTime = this.formatTime(currentTime);
      this.totalTime = this.formatTime(totalTime);

      this.progress = (currentTime / totalTime) * 100;
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
  },
};
</script>

<style lang="scss" scoped>
.inputStyle{
  width: 200px;
}
</style>

4.效果