阅读模式:

vue自定义audio播放组件

查看:94  交流:0  类型:  来源:php自学网  标签 vue组件

        在vue中使用原始的audio标签展示的界面并不美观,所以自己重新实现了audio功能,封装成了一个vue子组件,直接调用。

        原始图片界面图:

<audio src="music.mp3" controls autoplay preload loop>

original audio view.png

一、vue audio组件代码

/components/audioplay.vue 封装。代码中使用的vant框架和自定义了icon,使用需更换。支持播放音频,音频加载提示、加载失败提示、加载完成提示、播放中提示、播放完成提示、时间倒计时和播放暂停音乐功能。

<template>
  <div class="audio-user" @click.stop="playThisAudio($event, url)">
    <div><van-icon class-prefix="my-icon" name="audio" size="18" color="#a3a3a3" />{{audioStatus}}</div>
    <div>00:{{durations}}</div>
  </div>
</template>

<script>
import { Icon } from 'vant'
export default {
  name: 'audioplay',
  components: {
    [Icon.name]: Icon
  },
  props: ['url', 'duration'],
  data () {
    return {
      audioStatus: '播放',
      durations: this.duration,
      audio: ''
    }
  },
  methods: {
    // 播放语音
    playThisAudio (e, url) {
      var that = this

      if (this.audioStatus === '播放中...') {
        if (this.audio) {
          this.audio.pause()
          this.audioStatus = '暂停'
          return false
        }
      }
      if (this.audioStatus === '暂停') {
        if (this.audio) {
          this.audio.play()
          this.audioStatus = '播放中...'
          return false
        }
      }
      this.audio = new Audio(url)
      this.audio.autoplay = true
      this.audio.play()

      var sumDuration = this.duration
      var audioI = 0

      this.audio.addEventListener('loadstart', function () {
        that.audioStatus = '心声加载中...'
      })
      this.audio.addEventListener('loadeddata', function () {
        that.audioStatus = '加载完成...'
      })
      this.audio.addEventListener('error', function () {
        that.audioStatus = '加载失败...'
      })
      this.audio.addEventListener('timeupdate', function () {
        audioI++
        if (audioI <= 1) {
          that.audioStatus = '播放中...'
        }
        let du = parseInt(sumDuration - that.audio.currentTime)
        if (du < 1) {
          that.durations = '00'
        } else if (du < 10) {
          that.durations = '0' + du
        } else {
          that.durations = du
        }
      })
      this.audio.addEventListener('ended', function () {
        that.durations = that.duration
        that.audioStatus = '播放完成'
        setTimeout(() => {
          this.audio = ''
        }, 150)
      })
    }
  }
}
</script>

<style scoped>
  .audio-user{
    width: 3rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background-color: #eee;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0.2rem;
    color: green;
  }
</style>

index.vue父组件中的调用子组件audioplay

传值:

    url : 音频地址

    duration : 音频时长

<audioplay :url="item.voice" :duration="item.duration"></audioplay>
import audioplay from '@/components/audioplay.vue'
export default {
  name: 'index',
  components: {
    'audioplay': audioplay
  },
}

二、组件预览效果

vue audio组件预览图

Audio事件参考:


audio事件事件描述
loadstart当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。即当加载过程开始时
durationchange当指定音频/视频的时长数据发生变化时,发生 durationchange 事件
loadedmetadata当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件
progress当浏览器正在下载指定的音频/视频时,会发生 progress 事件
suspend该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发,或者因为被暂停的原因
loadeddata当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件
canplay当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件
canplaythrough当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件
play

开始播放时触发

playing

开始回放

timeupdate

播放时间改变   这个会一直打印

pause

暂停时会触发,当播放完一首歌曲时也会触发

ended

当播放完一首歌曲时也会触发

abort

客户端主动终止下载(不是因为错误引起)

error

请求数据时遇到错误

stalled

网速失速

waiting

等待数据,并非错误

seeking

寻找中

seeked

寻找完毕

ratechange

播放速率改变

volumechange

音量改变


分享到:
0 0

我的看法:


IN:
  表情:
提交