vue 音频组件

一、概述

因项目要求，需要做一个音频播放器。

二、demo

test.vue

1.  
   <template>
2.  
   <div>
3.  
   <img src="../assets/audio-bg.png" alt="">
4.  
   <br>
5.  
   <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
6.  
   <audio ref="audio"
7.  
   @pause="onPause"
8.  
   @play="onPlay"
9.  
   @timeupdate="onTimeupdate"
10.  
    @loadedmetadata="onLoadedmetadata"
11.  
    src="https://wdd.js.org/element-audio/static/falling-star.mp3"
12.  
    controls="controls">
13.  
     
14.  
    </audio>
15.  
     
16.  
    <!-- 音频播放控件 -->
17.  
    <!-- <div>-->
18.  
    <!-- <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>-->
19.  
     
20.  
    <!-- <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>-->
21.  
     
22.  
    <!-- <el-tag type="info">{{ audio.maxTime | formatSecond}}</el-tag>-->
23.  
    <!-- </div>-->
24.  
    </div>
25.  
    </template>
26.  
     
27.  
    <script>
28.  
     
29.  
    // 将整数转换成 时：分：秒的格式
30.  
    function realFormatSecond(second) {
31.  
    var secondType = typeof second
32.  
     
33.  
    if (secondType === 'number' || secondType === 'string') {
34.  
    second = parseInt(second)
35.  
     
36.  
    var hours = Math.floor(second / 3600)
37.  
    second = second - hours * 3600
38.  
    var mimute = Math.floor(second / 60)
39.  
    second = second - mimute * 60
40.  
     
41.  
    return hours ':' ('0' mimute).slice(-2) ':' ('0' second).slice(-2)
42.  
    } else {
43.  
    return '0:00:00'
44.  
    }
45.  
    }
46.  
     
47.  
    export default {
48.  
    data () {
49.  
    return {
50.  
    audio: {
51.  
    // 该字段是音频是否处于播放状态的属性
52.  
    playing: false,
53.  
    // 音频当前播放时长
54.  
    currentTime: 0,
55.  
    // 音频最大播放时长
56.  
    maxTime: 0
57.  
    }
58.  
    }
59.  
    },
60.  
    methods: {
61.  
    // 控制音频的播放与暂停
62.  
    startPlayOrPause () {
63.  
    return this.audio.playing ? this.pause() : this.play()
64.  
    },
65.  
    // 播放音频
66.  
    play () {
67.  
    this.$refs.audio.play()
68.  
    },
69.  
    // 暂停音频
70.  
    pause () {
71.  
    this.$refs.audio.pause()
72.  
    },
73.  
    // 当音频播放
74.  
    onPlay () {
75.  
    this.audio.playing = true
76.  
    },
77.  
    // 当音频暂停
78.  
    onPause () {
79.  
    this.audio.playing = false
80.  
    },
81.  
    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
82.  
    onTimeupdate(res) {
83.  
    console.log('timeupdate')
84.  
    console.log(res)
85.  
    this.audio.currentTime = res.target.currentTime
86.  
    },
87.  
    // 当加载语音流元数据完成后，会触发该事件的回调函数
88.  
    // 语音元数据主要是语音的长度之类的数据
89.  
    onLoadedmetadata(res) {
90.  
    console.log('loadedmetadata')
91.  
    console.log(res)
92.  
    this.audio.maxTime = parseInt(res.target.duration)
93.  
    }
94.  
    },
95.  
    filters: {
96.  
    // 使用组件过滤器来动态改变按钮的显示
97.  
    transPlayPause(value) {
98.  
    return value ? '暂停' : '播放'
99.  
    },
100.  
     // 将整数转化成时分秒
101.  
     formatSecond(second = 0) {
102.  
     return realFormatSecond(second)
103.  
     }
104.  
     }
105.  
     }
106.  
     </script>
107.  
      
108.  
     <style>
109.  
      
110.  
     </style>

注意：这里有一张背景图片，大家可以从百度中下载。

效果如下：

这里的功能有几个：开始/暂停，显示音频时长，设置音量大小，设置播放倍数。

关于更多代码的解释，请查看下面的参考链接，里面有详细的描述，这里就不在叙述了。

本文参考链接：

https://segmentfault.com/a/1190000012453975