Vue自定义封装音频播放组件(带拖拽进度条)(改版)

参考别人写的组件进行的改版
原文组件链接:https://blog.youkuaiyun.com/weixin_48215380/article/details/138598853
改版之后的样式
在这里插入图片描述

<template>
  <div class="audioModule">
    <div class="left">
      <p class="audio_Name">{
   
   {
   
    audioName }}</p>
      <div class="audio_wrap_content">
        <audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc"
          @loadedmetadata="onLoadedmetadata" @ended="handleEnd">
          <source :src="audioSrc" />
        </audio>
        <div class="cudio_control_content">

          <!-- <img @click="startPlayOrPause" class="state_img" :src="audio.playing ? stopImg : playImg" alt="" /> -->
          <div class="state_time" style="marginRight:15px">{
   
   {
   
    audio.currentTime | formatSecond }}</div>
          <div class="slider">
            <el-slider v-model="sliderTime" :show-tooltip="false" @change="onChange"></el-slider>
          </div>
          <div class="state_time" style="marginLeft:10px">{
   
   {
   
    audio.maxTime | formatSecond }}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="audio_btn active_audio_hover">
        <i class="iconfont" style="transform: rotate(180deg);"  @click="advance(2)">&#xe74e;</i>
      </div>
      <div class="audio_btn" @click="startPlayOrPause" :class="{active_audio_btn:audio.playing}">
        <i class="iconfont" v-if="!audio.playing">&#xe751;</i>
        <i class="iconfont" v-else>&#xe750;
### 回答1: 好的,我可以为您提供一些关于使用Vue实现进度条音频文件播放的示例代码。首先,您需要安装Vue.js和一个适当的音频播放器库,比如 `howler.js`。 在你的Vue组件中,你可以创建一个`<audio>`元素和一个进度条元素,如下所示: ``` <template> <div> <audio ref="audio" :src="audioFile"></audio> <div class="progress-bar" :style="{ width: progress + '%' }"></div> </div> </template> ``` 在上面的代码中,我们使用了一个`ref`属性来引用`<audio>`元素,这样我们就可以在Vue组件中使用它。 接下来,我们需要在Vue组件中添加一些方法来控制音频文件的播放进度条的更新。我们可以使用`howler.js`库来处理音频播放,这个库提供了许多实用的方法,比如`play()`、`pause()`和`on('end')`等。我们还需要添加一个计时器,以便更新进度条的位置。 ``` <script> import { Howl } from 'howler'; export default { data() { return { audioFile: 'your-audio-file.mp3', progress: 0 }; }, methods: { playAudio() { const sound = new Howl({ src: [this.audioFile], onend: () => { this.progress = 0; } }); sound.play(); this.timer = setInterval(() => { this.progress = (sound.seek() / sound.duration()) * 100; }, 100); }, pauseAudio() { clearInterval(this.timer); this.$refs.audio.pause(); } } }; </script> ``` 在上面的代码中,我们使用了`Howl`构造函数来创建一个新的音频对象,并使用`src`选项将音频文件添加到对象中。我们还使用了`onend`选项来在音频播放结束时将进度条重置为0。在`playAudio()`方法中,我们调用`play()`方法来开始播放音频,并使用`setInterval()`方法创建一个计时器来更新进度条的位置。在`pauseAudio()`方法中,我们停止计时器并暂停音频播放。 最后,我们可以在Vue组件的模板中添加一些按钮来控制音频文件的播放和暂停。 ``` <template> <div> <audio ref="audio" :src="audioFile"></audio> <div class="progress-bar" :style="{ width: progress + '%' }"></div> <button @click="playAudio">播放</button> <button @click="pauseAudio">暂停</button> </div> </template> ``` 上述代码实现了一个简单的音频播放器,进度条功能。当用户点击“播放”按钮时,音频文件开始播放,并且进度条开始移动。当用户点击“暂停”按钮时,音频文件暂停播放,并且进度条停止移动。 ### 回答2: Vue代码实现进度条音频播放可以使用`<audio>`元素和Vue的动态绑定来实现,以下是一个简单的例子: ```html <template> <div> <audio ref="audioPlayer" :src="audioSrc" @timeupdate="updateProgress"></audio> <input type="range" min="0" :max="totalDuration" v-model="currentTime" @input="seek"> <span>{{ currentTime }} / {{ totalDuration }}</span> </div> </template> <script> export default { data() { return { audioSrc: 'audio.mp3', currentTime: 0, totalDuration: 0 }; }, methods: { updateProgress() { const audioPlayer = this.$refs.audioPlayer; this.currentTime = audioPlayer.currentTime; }, seek() { const audioPlayer = this.$refs.audioPlayer; audioPlayer.currentTime = this.currentTime; } }, mounted() { // 获取音频总时长 const audioPlayer = this.$refs.audioPlayer; audioPlayer.addEventListener('loadedmetadata', () => { this.totalDuration = audioPlayer.duration; }); } }; </script> ``` 在上面的代码中,通过`audio`元素将音频文件(示例中为`audio.mp3`)添加到页面中,并使用`ref`属性对其进行引用。进度条使用`input`元素,并用`v-model`指令双向绑定当前播放时间`currentTime`。`@input`事件监听进度条的变化,并将当前时间赋值给`audio`元素的`currentTime`属性,实现拖动进度条改变播放进度的功能。 通过`@timeupdate`事件监听音频播放时间的变化,并将其赋值给`currentTime`,并在模板中显示当前播放时间和总时长。 在`mounted`钩子函数中,使用`loadedmetadata`事件获取音频总时长,并将其赋值给`totalDuration`,以便在模板中显示总时长。 需要注意的是,为了使音频元素正确工作,需要将对应的音频文件放置在Vue项目中的相应位置,并正确引用。 ### 回答3: 在使用Vue实现音频文件进度条播放,我们可以按照以下步骤进行: 首先,安装并引入 Vue音频播放器插件(如 vue-audio)。 ```javascript // 在命令行中运行以下命令安装依赖: npm install vue vue-audio ``` 在Vue组件中,可以使用以下代码实现音频文件的播放: ```html <template> <div> <audio ref="audioPlayer" :src="audioUrl" @timeupdate="updateProgress"></audio> <input type="range" ref="progressBar" v-model="progress" @input="seekToPosition"> </div> </template> <script> import AudioPlayer from 'vue-audio' export default { components: { AudioPlayer }, data() { return { audioUrl: '/path/to/audio.mp3', progress: 0, duration: 0 } }, mounted() { this.$refs.audioPlayer.addEventListener('loadedmetadata', () => { this.duration = Math.floor(this.$refs.audioPlayer.duration) }) }, methods: { updateProgress() { this.progress = Math.floor((this.$refs.audioPlayer.currentTime / this.duration) * 100) }, seekToPosition() { const newPosition = (this.progress / 100) * this.duration this.$refs.audioPlayer.currentTime = newPosition } } } </script> ``` 在上述代码中,我们通过引用`vue-audio`插件的`AudioPlayer`组件来实例化一个音频播放器。 audio标签是由这个插件封装的,可以通过ref属性获取它的DOM元素,进而使用一些原生API如`loadedmetadata`、`currentTime`和`duration`来控制音频播放和获取音频时长。 `input`标签用于显示和控制进度条,我们将其和data中的`progress`属性进行绑定,通过调整`progress`的值来更新进度条的显示,并在`seekToPosition`方法中设置音频播放位置。 需要注意的是,上述代码仅为示例,具体的音频文件路径和样式等需要按照具体项目的需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值