Vue实现自定义音频播放器组件

效果图

components

template

<div class='daudio'><audio ref="audio" @timeupdate="updateProgress" @ended="end" @loadedmetadata="loadedmetadata" controlsstyle="display: none" src="../assets/audio/y837.mp3" preload="metadata">您的浏览器不支持音频播放</audio><div class="audioBox"><div class="audioInfo"><h3>2022123434.mp3（3.75KB）</h3><p id="time">{{ duration }}/{{ current }}</p></div><img ref="control" v-if="!isPlay" src="../assets/images/paly.png" alt="" @click="audioPlay(true)"class="audioControls" /><img ref="control" v-else src="../assets/images/suspend.png" alt="" @click="audioPlay(false)"class="audioControls" /></div></div>

javascript

export default {name: "AudioPlayer",data() {return {audio: null,contorl: null,contorlDot: null,contorlProgress: null,contorlProgressBox: null,current: "00:00",duration: "00:00",isPlay: false};},props: {},created() {},mounted() {this.init()},methods: {init() {this.audio = this.$refs.audio;this.contorl = this.$refs.contorl;},// 时分秒转换transTime(value) {let that = this;var time = "";var h = parseInt(`${value / 3600}`);value %= 3600;var m = parseInt(`${value / 60}`);var s = parseInt(`${value % 60}`);if (h > 0) {time = that.formatTime(h + ":" + m + ":" + s);} else {time = that.formatTime(m + ":" + s);}return time;},// 补零formatTime(value) {var time = "";var s = value.split(":");var i = 0;for (; i < s.length - 1; i++) {time += s[i].length === 1 ? "0" + s[i] : s[i];time += ":";}time += s[i].length === 1 ? "0" + s[i] : s[i];return time;},// 音频播放暂停audioPlay(status) {if (status) {this.audio.play();} else {this.audio.pause();}this.isPlay = status},// 更新进度条与当前播放时间updateProgress(e) {this.current = this.transTime(e.target.currentTime);//         let value = e.target.currentTime / Audio.duration;//   current.innerText = transTime(e.target.currentTime);//   contorlProgress.style.width = `${value * 100}%`;//   contorlDot.style.left = `${value * 100}%`;},// 音频结束end(e) {// contorlProgress.style.width = "0%";// contorlDot.style.left = "0%";// contorl.innerText = "播放";this.isPlay = false},loadedmetadata(e) {this.duration = this.transTime(e.target.duration);}},//如果页面有keep-alive缓存功能，这个函数会触发activated() { },
};
</script>

less

.audioBox {padding: 8px 16px;background: #eaebed;border-radius: 10px;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;width: 311px;height: 54px;box-sizing: border-box;
}.audioControls {width: 22px;height: 22px;
}.audioInfo {h3 {font-family: PingFangSC-Regular;font-size: 14px;color: #333333;letter-spacing: 0.2px;text-align: justify;font-weight: 400;margin-bottom: 4px;}p {font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.17px;text-align: justify;font-weight: 400;}
}

引入

import AudioPlayer from "../../components/AudioPlayer.vue";
components: { AudioPlayer },

<AudioPlayer fileUrl="../assets/audio/y837.mp3"></AudioPlayer>

文档参考
关于 Audio 自定义样式
H5 audio 音频标签自定义样式修改以及添加播放控制事件

Vue实现自定义音频播放器组件相关推荐

vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
自定义音频播放器_创建自定义HTML5音频播放器
自定义音频播放器在本教程中,我将向您介绍HTML5音频,并向您展示如何创建自己的播放器. 如果您想走捷径,请查看Envato市场上可用的现成的HTML5音频播放器 . 它使您可以从各种来源创建播放列 ...
vue音频播放器组件
因为原生audio 播放器太丑了重新整理百度综合完成了播放器, 基于element ui 组件书写的需要的自取 <template><div class="audio ...
polymer ajax_使用Polymer创建自定义音频播放器元素
polymer ajax 什么是聚合物? (What is Polymer?) Polymer is a shim for a new web standard called Web Componen ...
微信小程序：音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. class="video-player vjs-custom-skin" ...
Vue - 音频播放器插件（vue-aplayer）
Vue使用音频播放器插件 vue-aplayer vue-aplayer中文文档:https://aplayer.netlify.app/docs/guide/ GitHub文档:https://gi ...
前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio
一个h5的音频播放器,播放列表与播放器上下首切换样式效果对应起来. 五秒后自动收缩形成挂件(不可移动).点击播放器图片即可展开.收起. audio.js audio.css 资源下载详细 ...

Vue实现自定义音频播放器组件

效果图

components

template

javascript

less

引入

Vue实现自定义音频播放器组件相关推荐

最新文章

热门文章