做网站首页的图片怎么缩小,台州专业制作网站,现在主流网站用什么做的,陕西省外省入陕建筑信息平台Vue自定义封装音频播放组件#xff08;带拖拽进度条#xff09;
描述
该款自定义组件可作为音频、视频播放的进度条#xff0c;用于控制音频、视频的播放进度、暂停开始、拖拽进度条拓展性极高。
实现效果 具体效果可以根据自定义内容进行位置调整
项目需求
有播放暂停…Vue自定义封装音频播放组件带拖拽进度条
描述
该款自定义组件可作为音频、视频播放的进度条用于控制音频、视频的播放进度、暂停开始、拖拽进度条拓展性极高。
实现效果 具体效果可以根据自定义内容进行位置调整
项目需求
有播放暂停按钮进度条可以跟随播放丝滑更新有当前播放时间和总时间可以根据播放更新当前时间可以点击进度条的某一处跳转到指定处进行播放
技术栈
vue2elementUI || elementPlus || vant vue3去掉了filter API
功能实现 templatediv classaudio_wrap_content :style[{ backgroundColor: bgColor }]audiorefaudioplayplayFuncpausepauseFunctimeupdatetimeupdateFuncloadedmetadataonLoadedmetadataendedhandleEndsource :srcaudioSrc //audiodiv classcudio_control_contentimgclickstartPlayOrPauseclassstate_img:srcaudio.playing ? stopImg : playImgalt/div classstate_time stylemarginRight:5px{{audio.currentTime | formatSecond}}/divdiv classsliderel-slider v-modelsliderTime :show-tooltipfalse changeonChange/el-slider/div!-- 这块代码是移动端的vant组件库可用于移动端H5 (如要用此代码则需要将css中的.slider:flex:1去掉 并将slider类名div注释即可) --!-- van-sliderv-modelsliderTimebar-height1pxactive-color#ffb900button-size4pxchangeonChangetemplate #buttondiv classcustom-button/div/template/van-slider --div classstate_time stylemarginLeft:5px{{audio.maxTime | formatSecond}}/div/div/div/templatescriptfunction formatTime(second) {let m parseInt(second / 60);let s parseInt(second % 60);let formatTime ;if(second0){return 000}if (m 0) {if(s10){formatTime 0 s ;}else{formatTime 00 s ;}} else {if(s10){formatTime m s ;}else{formatTime m 0 s ;}}return formatTime}export default {name: AudioPlay,props: {bgColor: {type: String,default: rgba(255,255,255,0.15),},audioSrc: {type: String,default: require(/assets/music/offer_des.mp3),},themeColor: {type: String,default: #ffb900,},},data() {return {value1:1,playImg: require(/assets/images/play.png),stopImg: require(/assets/images/stop.png),sliderTime: 0,audio: {maxTime: 0 /* 音频最大播放时长 */,currentTime: 0 /* 当前播放时长 */,playing: false /* 音频当前处于播放/暂停状态 */,},};},methods: {/* 播放音频 */play() {console.log(触发 播放);this.$refs.audio.play();},/* 暂停音频 */pause() {this.$refs.audio.pause();},/** 当音乐播放 */playFunc() {this.audio.playing true;},/** 当音乐暂停 */pauseFunc() {this.audio.playing false;},/** 当音乐结束 */handleEnd(){this.sliderTime 0this.audio.playing falsethis.audio.currentTime 0},/* 每秒触发一次 用来更新当前播放时间 */timeupdateFunc(res) {this.audio.currentTime res.target.currentTime/* 当音频播放时 进度条也要随之改变 */this.sliderTime parseInt(this.audio.currentTime / this.audio.maxTime * 100)},/* 音频加载完成后的回调函数 */onLoadedmetadata(res) {console.log(111,首次加载完成);this.audio.maxTime parseInt(res.target.duration);},/* 控制音频播放、暂停 */startPlayOrPause() {console.log(bof,暂停-播放);this.audio.playing ? this.pause() : this.play();},/* 拖动进度条改变当前时间 value是进度条改变时的回调函数的参数 值为0~100之间需要换算成实际时间 */onChange(value){console.log(value,values);this.$refs.audio.currentTime parseInt(value / 100 * this.audio.maxTime)// console.log(this.$refs.audio.currentTime , this.$refs.audio.currentTime );}},filters: {formatSecond(second0){return formatTime(second)}},};/scriptstyle scoped langless.audio_wrap_content {// width: 180px;height: 26px;border-radius: 15px;// transform: translateX(-25px);}.cudio_control_content {margin: 0 auto;width: 90%;height: 100%;display: flex;.slider{flex:1}justify-content: space-between;align-items: center;.state_img {width: 18px;height: 18px;}.custom-button {width: 8px;background-color: #ffb900;height: 8px;border-radius: 8px;}.state_time {font-family: BIGJOHN;font-size: 10px;color: rgba(34, 34, 34, 0.3);margin-right: 3px;margin-left: 3px;}}/style
