近来有一个实现音频倍速播放的需求，找了一圈都没有找到合适的并且满足我需求的插件，所以就用h5的video标签来实现项目需要的效果。
技术栈：vuejs，element-ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0;
}
.call-record-audio {
margin-top: 10px;
}
.audio-time,
.audio-speed {
font-size: 14px;
color: #333;
margin-left: 10px;
line-height: 38px;
float: left;
}
.audio-speed {
cursor: pointer;
}
.audio-slider {
width: 500px;
margin: 0 20px;
float: left;
}
.audio-btn {
line-height: 38px;
float: left;
}
.audio-btn>i {
font-size: 24px;
color: #066EB7;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="clearfix" id="audio">
<audio autoplay="autoplay" ref="audioPlayer" preload="auto"
src="http://wechatapppro-1252524126.file.myqcloud.com/appG1VMUALC2470/audio_compressed/1505377565_4fd15d83213bceb23a97ad6af45f1dae.mp3">
你的浏览器不支持audio标签
</audio>
<span class="audio-btn">
<!-- 播放 -->
<i class="el-icon-video-play" @click="playAudio" v-show="!isPlay"></i>
<!-- 暂停 -->
<i class="el-icon-video-pause" @click="pauseAudio" v-show="isPlay"></i>
</span>
<!-- 时间进度／总时长 -->
<span class="audio-time">{{audioCurrentTime}}／{{audioAllTime}}</span>
<!-- 进度条 -->
<div class="audio-slider">
<el-slider v-model="audioPercentage" :show-tooltip="false" @change="handleChange"></el-slider>
</div>
<!-- 设置倍速 -->
<el-dropdown size="small" @command="changeSpeed">
<span class="audio-speed">倍速：{{speed}}X</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item, index) in multipleArray" :key="index" :command="item">
{{item}}X
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 引入 Vue 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let vueApp = new Vue({
el: '#audio',
data() {
return {
audioPercentage: 0, // 音频进度百分比
audioCurrentTime: '00:00',// 音频当前播放时间
audioAllTime: '00:00', // 音频总播放时间
audioAllDuration: 0, // 音频总播放秒数
isPlay: false, // 是否正在播放
multipleArray: [0.75, 1, 1.5, 2], // 倍速设置
audioInterval: null, // 定时器
speed: 1,
}
},
methods: {
/** 设置定时检测 */
setAudioInterval() {
this.audioInterval = setInterval(() => {
this.getAudioTime();
let audioPlayer = this.$refs.audioPlayer;
if (audioPlayer.ended) {
// 播放结束后是否重置数据
// clearInterval(this.audioInterval);
// this.audioPercentage = 0;
// audioPlayer.currentTime = 0;
// this.audioCurrentTime = '00:00';
// this.isPlay = false;
}
audioPlayer.paused ? this.isPlay = false : this.isPlay = true
}, 500)
},
/** 播放 */
playAudio() {
// 重设定时器
clearInterval(this.audioInterval);
this.getAudioTime();
this.setAudioInterval();
let audioPlayer = this.$refs.audioPlayer;
audioPlayer.play();
this.isPlay = true;
},
/** 暂停播放 */
pauseAudio() {
let audioPlayer = this.$refs.audioPlayer;
audioPlayer.pause();
this.isPlay = false;
},
/** 获取播放时间 */
getAudioTime() {
let audioPlayer = this.$refs.audioPlayer;
this.audioAllTime = this.formatTime(audioPlayer.duration);
this.audioAllDuration = audioPlayer.duration;
this.audioCurrentTime = this.formatTime(audioPlayer.currentTime);
//计算当前进度百分比
this.audioPercentage = (audioPlayer.currentTime * 100 / audioPlayer.duration).toFixed(3);
this.audioPercentage = Number(this.audioPercentage);
},
/** 滑动进度条 */
handleChange(value) {
// 设置播放时间
let audioPlayer = this.$refs.audioPlayer;
this.audioCurrentTime = this.formatTime(this.audioAllDuration * Number(value) / 100);
const currentTime = Number(this.audioAllDuration * value / 100);
audioPlayer.currentTime = parseInt(currentTime);
},
/** 设置倍速播放 */
changeSpeed(command) {
let audioPlayer = this.$refs.audioPlayer;
audioPlayer.playbackRate = command;
this.speed = command;
},
/** 时间格式话 */
formatTime(second) {
const secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = parseInt(second)
const hours = Math.floor(second / 3600);
second = second - hours * 3600;
second = second
const mimute = Math.floor(second / 60)
second = second - mimute * 60
return ('0' + hours).slice(-2) + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '00:00'
}
},
},
mounted() {
this.setAudioInterval();
},
})
</script>
</body>
</html>
