简单使用vue2和elementUI自定义audio支持拖拽进度

本文主要是介绍简单使用vue2和elementUI自定义audio支持拖拽进度,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<template><div class="music-player"><audio ref="audio" :src="src" @timeupdate.debounce="updateTime" @loadedmetadata="loadedmetadata" @ended="onAudioEnded"></audio><!-- 播放暂停按钮 --><div class="cm-btn-left" @click="togglePlay"><img src="../../../../public/img/icon/play.png" v-show="!isPlaying"><img src="../../../../public/img/icon/pause.png" v-show="isPlaying"></div><!-- 时间 --><div class="cm-time"><span>{{ currentTimeShow }}</span> / <span>{{ durationShow }}</span></div><!-- 播放进度条 --><div class="cm-progress" @mousedown="handleMouseDown"><el-slider v-model="progress" :max="duration" :format-tooltip="formatTime" @change="progressChange"></el-slider></div><!-- 倍速控制 --><div class="playback-rate-wrapper"><el-select v-model="playbackRate" @change="changePlaybackRate"><el-optionv-for="item in speed":key="item.value":label="item.label":value="item.value"></el-option></el-select></div><!-- 音量控制 --><div class="volumn-wrapper"><el-popoverpopper-class="volumn-popover"placement="right"width="30px"trigger="hover"><el-sliderv-model="volumnValue"verticaltooltip-class="volumn-tooltip"height="80px"@change="volumnChange"></el-slider><el-button slot="reference" type="text"><img src="../../../../public/img/icon/volumn.png"></el-button></el-popover></div></div>
</template><script>
import { ref, computed } from 'vue';export default {props: {src: String,},data() {return {isPlaying: false,currentTime: 0,progress: 0,duration: 0,playbackRate: 1,speed: [{label: '0.5x',value: 0.5},{label: '0.75x',value: 0.75},{label: '1x',value: 1},{label: '1.5x',value: 1.5},{label: '2x',value: 2}],volumnValue: 50,lastTimeUpdate: null};},computed: {currentTimeShow: function () {return this.formatTime(this.currentTime);},durationShow: function () {return this.formatTime(this.duration);}},mounted() {},beforeDestroy() {},methods: {// 播放暂停按钮点击事件togglePlay() {if (this.isPlaying) {this.$refs.audio.pause();this.isPlaying = false;} else {this.$refs.audio.play();this.$refs.audio.volume = this.volumnValue / 100;this.isPlaying = true;}},// 格式化播放时间formatTime(seconds) {const minutes = Math.floor(seconds / 60);const secondsRemainder = Math.round(seconds % 60);return `${minutes}:${secondsRemainder < 10 ? '0' : ''}${secondsRemainder}`;},// 倍速控制changePlaybackRate() {this.$refs.audio.playbackRate = this.playbackRate;},// 更新播放时间(节约资源,手动控制一秒执行一次)updateTime() {const now = Date.now();if (!this.lastTimeUpdate || now - this.lastTimeUpdate >= 1000) {this.lastTimeUpdate = now;this.currentTime = this.$refs.audio.currentTime;this.progress = this.currentTime;}},// 获取播放总时长loadedmetadata() {this.duration = this.$refs.audio.duration;},// 播放结束onAudioEnded() {this.isPlaying = false;},// 进度条鼠标按下事件handleMouseDown() {this.$refs.audio.pause();},// 设置进度progressChange(e) {this.$refs.audio.currentTime = e;this.progress = e;this.$refs.audio.play();this.isPlaying = true;},// 设置音量volumnChange(e) {this.$refs.audio.volume = e / 100;},},
};
</script><style lang="scss" scoped>.music-player {display: flex;align-items: center;justify-content: space-between;padding: 0px 20px;background-color: #f5f5f5;border-radius: 27px;height: 54px;width: 100%;.cm-btn-left {cursor: pointer;width: 22px;height: 22px;img {width: 22px;height: 22px;}}.volumn-wrapper {img {width: 20px;height: 18px;}}.cm-time {font-size: 14px;color: #404040;margin: 0 10px;}.cm-progress {flex: 1;margin: 0 15px 0 10px;}.playback-rate-wrapper {margin-right: 10px;::v-deep .el-input__suffix {display: none;}::v-deep .el-input__inner {height: 28px;width: 45px;text-align: center;padding: 0px !important;font-size: 12px;}}}::v-deep .el-slider__button {width: 12px;height: 12px;}::v-deep .el-popover {min-width: auto !important;}
</style>

app.vue中或者其他全局变量中修改下样式

.volumn-popover {

  min-width: auto !important;

}

.volumn-tooltip {

  z-index: 99999 !important;

}

这篇关于简单使用vue2和elementUI自定义audio支持拖拽进度的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1027991

相关文章

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件