vue使用H5的audio标签问题
更新时间：2022年12月05日 10:04:23 作者：nao儿
这篇文章主要介绍了vue使用H5的audio标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用H5的audio标签
template代码：
<audio ref="audio" :src="audioUrl"></audio>
data里绑定audioUrl为audio的路径
audioUrl: 'static/audio/notify.wav' // 声音源
按钮播放声音：
click () {
this.$refs.audio.play()
}vue中自定义audio
一个页面上创建很多audio标签 并且自定义样式播放。
首先创建可以增删的播放列表css就不再显示了
<div class="d_andio_wrap">
<div class="d_audio" v-for="(item,index) in audioList" :key="index">
<audio id="audioMedia" :src="item.src" @timeupdate="updateTime" ref='audioMedia' @ended="end"></audio>
<img v-if="!item.isplay" class="img" src="../../../assets/images/icon_play.png" alt="" @click="playAudio(index)">
<img v-if="item.isplay" class="img" src="../../../assets/images/icon_pause.png" alt="" @click="pauseAudio(index)">
<div class="audio_body">
<div class="audio_title">
<span>{{item.title}}</span>
</div>
<div class="audio_info">
<span class="audio_live">{{item.play_live | audioTime}}</span>
<div class="audio_progress" @mousedown.self="mousedown($event,index)">
<div class="audio_progress_line" :style="{width:item.play_live/item.play_time*100+'%'}" @mousedown.self="mousedownP($event,index)"></div>
<div class="audio_progress_dot" :style="{left:item.play_live/item.play_time*100+'%'}" @mousedown.self="drag('audio_progress_dot',index)"></div>
</div>
<span class="audio_live">{{item.play_time | audioTime}}</span>
</div>
</div>
<i class="el-icon-error" @click="deleteAudio(index)"></i>
</div>
</div>data数据
audioList:[
{
title:'龙的传人',
key:0,
videoid:'',
src:"ssssss.mp3",
play_live:0,
play_time:'154',
isplay:false,//是否播放
},
{
title:'龙的传人',
key:0,
videoid:'',
src:"sssssss.mp3",
play_live:0,
play_time:'154',
isplay:false,//是否播放
}
],删除音频，增加音频就不再写了
//删除音频
deleteAudio(index){
this.audioList.splice(index, 1);
},然后点击播放、暂停、 监听音频当前时间以及播放完毕
//播放音频
playAudio(index){
let _this =this;
let audioMedia = this.$refs.audioMedia;//获取所有audio对象
this.audioList[this.playAudioIndex].isplay = false;//上一个播放的audio图片换为暂停
audioMedia[this.playAudioIndex].pause();//上一个播放的audio暂停
this.audioList[index].isplay = true;//把当前audio图片设置为播放状态
//当前audio延时播放--此处处理是由于updateTime在获取当前播放时长时，会获取一次上个audio的播放时长，才能获取到当前时长，页面播放进度会跳一下
setTimeout(()=>{
audioMedia[index].currentTime = this.audioList[index].play_live;
audioMedia[index].play();
_this.playAudioIndex = index;
},100)
// console.log(this.audioList[index].play_live)
},
//暂停音频
pauseAudio(index){
let audioMedia = this.$refs.audioMedia;
this.audioList[index].isplay = false;
audioMedia[index].pause();
},
//音频监测当前时间
updateTime(e){
let _this = this;
// _this.$set(_this.audioList[_this.playAudioIndex],"play_live",_this.audioList[_this.playAudioIndex].play_live);
//用秒数来显示当前播放进度
// console.log(e.target.currentTime)
let timeDisplay = Math.floor(e.target.currentTime);//获取实时时间
_this.$set(_this.audioList[_this.playAudioIndex],"play_live",timeDisplay);
},
//音频监测播放完毕
end(e){
console.log(e)
this.audioList[this.playAudioIndex].isplay = false;
},实现了播放之后，再处理点击播放
这里注意的e.clientX offsetLeft e.target.offsetLeft
//点击的是未拖动过进度的进度条
mousedown(e,index){
let audioMedia = this.$refs.audioMedia;
//父级
let fdrag = document.getElementsByClassName("d_andio_wrap")[0];
//点击时离左边框距离 e.clientX点击的那个点离浏览器左边距 fdrag.offsetLeft父级离浏览器距离 e.target.offsetLeft事件源离父级左边框距离
let targetLeft = e.clientX-fdrag.offsetLeft-e.target.offsetLeft;
//获取事件源的宽度
let targetWidth = e.target.offsetWidth;
//根据百分比转化成音频想要的秒数
let play_live = Math.floor((targetLeft/targetWidth)*this.audioList[index].play_time);
// console.log(targetLeft,targetWidth);
this.audioList[index].play_live = play_live;
//判断播放状态时直接跳转播放
if(!audioMedia[index].paused){
// console.log('播放')
audioMedia[index].currentTime = play_live;
}
},
//点击已经播放的进度条 但是要使用class = audio_progress的宽度以及距左边的距离
mousedownP(e,index){
let audioMedia = this.$refs.audioMedia;
//父级
let fdrag = document.getElementsByClassName("d_andio_wrap")[0];
//进度条底色的总长度作为进度条总宽度
let zdrag = document.getElementsByClassName("audio_progress")[0];
//点击时离左边框距离 e.clientX点击的那个点离浏览器左边距 fdrag.offsetLeft父级离浏览器距离 zdrag.offsetLeft事件源离父级左边框距离
let targetLeft = e.clientX-fdrag.offsetLeft-zdrag.offsetLeft;
//获取事件源的宽度
let targetWidth = zdrag.offsetWidth;
//根据百分比转化成音频想要的秒数
let play_live = Math.floor((targetLeft/targetWidth)*this.audioList[index].play_time);
// console.log(play_live);
this.audioList[index].play_live = play_live;
//判断播放状态时直接跳转播放
if(!audioMedia[index].paused){
// console.log('播放')
audioMedia[index].currentTime = play_live;
}
},
拖动进度条
drag(element,index) {
let elementIndex = index;
let audioMedia = this.$refs.audioMedia;
//事件源
let _this = this;
let drag = document.getElementsByClassName(element)[index];
let dragOffsetLeft = drag.offsetLeft;
//父级容器的宽高 -- 避免在容器外拖拽
let fdrag = document.getElementsByClassName("audio_progress")[index];
//获取事件源的宽度 这里是因为圆点的宽度为drag.offsetWidth 不减去本身宽度不能够精确地表示出音频长短 也可以在moveX 加上drag.offsetWidth
let fdragWidth = fdrag.offsetWidth - drag.offsetWidth;
let diffX;//fdrag离浏览器左边的固定距离
let diffY;
let play_live;
drag.onmousedown = function(event) {
let e = event || window.event;
//e.clientX 鼠标离浏览器边框的距离 drag.offsetLeft鼠标离事件源左边框距离
e.preventDefault();
diffX = e.clientX - drag.offsetLeft;
if (typeof drag.setCapture !== "undefined") {
drag.setCapture();
}
document.onmousemove = function(event) {
let e = event || window.event;
let moveX = e.clientX - diffX;//移动时的距离
if (moveX <= 0) {
moveX = 0;
} else if (moveX > fdrag.offsetWidth - drag.offsetWidth) {
moveX = fdrag.offsetWidth - drag.offsetWidth;
}
play_live = Math.floor((moveX/fdragWidth)*_this.audioList[elementIndex].play_time);
_this.audioList[elementIndex].play_live = play_live;
};
document.onmouseup = function(event) {
this.onmousemove = null;
this.onmouseup = null;
if (typeof drag.setCapture !== "undefined") {
drag.setCapture();
}
//判断播放状态时直接跳转播放
if(!audioMedia[elementIndex].paused){
// console.log('播放')
audioMedia[elementIndex].currentTime = play_live;
}
};
};
},
小结：同一个页面如果只创建一个audio时，也可以实现切换src进行播放，但是在跳转时间点播放时失效，可能的原因是在切换src后，音频没有缓存，导致从0开始播放了。
在点击跳转时，点击进度条上面时要注意事件源的不同，从而导致获取的距浏览器距离已经距左边框距离的错误。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue.js开发中,经常会遇到需要展示搜索和列表的需求,为了提高代码复用性和开发效率,我们可以封装一个可配置的搜索列表组件,下面我们就来讲讲如何实现这样一个组件吧2023-08-08
这篇文章主要介绍了vue中子组件如何间接修改父组件传递过来的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue项目如何实现rsa加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了浅谈vue2 单页面如何设置网页title,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
css文件可以直接引入到main.js中,scss文件如果没有scss特殊语法也可以直接引入index.js,只有scss文件中的特殊语法全局引入的时候无法显示,所以需要特殊处理,下面这篇文章主要给大家介绍了关于vue全局引入scss样式文件的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue插槽,是学习vue中必不可少的一节,越来越发现插槽的好用,而过滤数据也是我们日常开发中必然会用到的,这篇文章主要给大家介绍了关于Vue插槽和过滤器的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
上传文件，基本上用了input框就可以解决，但大文件应该怎样上传呢，一次性上传明显不现实，因为每次一断网，那就会从头开始上传，所以切片势在必行，关键就是如何切，怎么保障文件数据不会丢失，同时优化上传保障机制，本文就来给大家讲讲如何上传大文件2023-07-07
这篇文章主要为大家介绍了vue项目实现搜索内容变红色显示，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了Vue作用域插槽实现方法及作用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
最新评论