作者：vipbic

转发链接：

前言

上次小编也分享一个关于Vue 开发过音乐播放对项目：

基于 electron-vue 开发的音乐播放器「实践」

这次公司有个单位项目，需要读取语音文件并进行播放，其实用audio引入个播放链接即可，不需要太多功能后来想到网站是不是也可以放个小播放器插件，索性查了audio相关api，也学习其中相关技巧，分享给大家

完整代码

整个代码很简单，有些audio-api注释也写在了后面html

<template>    <div class="music">        <div class="music__main">            <div :class="['music__main__cover',isPlay ? 'active' : '']" @click="play">                <img src="@/assets/meet.jpg" />            </div>            <div class="music__main__timeBar">                <div class="time">                    <span>{{ realMusicTime }}</span>                    <span>{{ totalMusicTime }}</span>                </div>                <div class="bar" ref="bar" @click="handClickBar">                    <div class="bar__slid" ref="slid" @click="handClickBar"></div>                </div>            </div>        </div>        <div class="music__btn">            <i class="el-icon-refresh" @click="switchMusic"></i>        </div>        <div class="music__mask"></div>        <audio ref="music" :src="audioSrc"></audio>    </div></template>

js

<script>export default {    data() {        this.audioSrcs = [            ';, // 芒种            ';, // 后来            ';, // 你的答案            ';, // 那女孩对我说            ';, // 侧脸            ';, //远方的你        ];        return {            isPlay: false,            realMusicTime: "00:00",            totalMusicTime: "00:00",            audioSrc: this.audioSrcs[0]        };    },    created() { },    mounted() {        this.watchMusicTime();    },    methods: {        play() {            if (this.music.paused) {                this.music.play();                this.isPlay = true;            } else {                this.music.pause();                this.isPlay = false;            }        },        // 处理时间        handlMusicTime() {            //用秒数来显示当前播放进度            let timeDisplay = Math.floor(this.music.currentTime); //获取实时时间            //分钟            let minute = parseInt(timeDisplay / 60);            if (minute < 10) {                minute = "0" + minute;            }            //秒            let second = Math.round(timeDisplay % 60);            if (second < 10) {                second = "0" + second;            }            this.realMusicTime = minute + ":" + second;        },        // 处理进度条        handMusicBar() {            let slid = this.$refs.slid;            let duration = this.music.duration;            let x = ((this.music.currentTime / duration) * 100).toFixed(2) + "%";            slid.style.width = x;        },        // 处理点击进度条事件        handClickBar(e) {            const barTotalWidth = this.bar.offsetWidth; // bar 总宽度            const rect = e.target.getBoundingClientRect(); // 元素右边距离页面边距的距离 返回上下左右            let length = e.pageX - rect.left;            this.music.currentTime = length / barTotalWidth * this.music.duration; // 计算播放时间 位置百分比*总时间            this.$nextTick(() => {                this.music.play();                this.isPlay = true;            })        },        // 切换歌曲        switchMusic() {            this.isPlay = false;            this.audioSrc = this.audioSrcs[Math.floor(Math.random() * 5)];            this.music.load()            // 文件下载完毕，如果不用等到全部下载完毕，可以用canplay事件            this.music.addEventListener("canplaythrough", () => {                this.music.play();                this.isPlay = true;            });        },        //使用事件监听方式捕捉事件        watchMusicTime() {            this.music = this.$refs.music;            this.bar = this.$refs.bar;            this.music.addEventListener(                "timeupdate",                () => {                    this.handlMusicTime();                    this.$nextTick(() => {                        this.handMusicBar();                    })                },                false            );            // 播放完毕            this.music.addEventListener("ended", () => {                this.switchMusic(); // 自动播放            });            // 捕获音频文件已准备完毕            // 当媒体文件可以播放的时候会触发oncanplay事件,也可以用oncanplay            this.music.oncanplaythrough = () => {                let time = this.music.duration;                //分钟                let minutes = parseInt(time / 60);                if (minutes < 10) {                    minutes = "0" + minutes;                }                //秒                let seconds = Math.round(time % 60);                if (seconds < 10) {                    seconds = "0" + seconds;                }                this.totalMusicTime = minutes + ":" + seconds;            };        }    }};</script>

less

<style lang="less">@keyframes musicRotate {    from {        transform: rotate(0);    }    to {        transform: rotate(360deg);    }}.music {    width: 500px;    margin: 0 auto;    border-radius: 15px;    position: relative;    padding: 30px;    box-sizing: border-box;    overflow: hidden;    &__main {        display: flex;        &__cover {            width: 80px;            height: 80px;            overflow: hidden;            border-radius: 50%;            background-color: #dddddd;            cursor: pointer;            animation: musicRotate 10s linear infinite;            animation-play-state: paused; // 暂定动画            img {                width: 100%;                height: 100%;            }            &.active {                animation-play-state: running; // 运行动画            }        }        &__timeBar {            flex: 1;            display: flex;            flex-direction: column;            justify-content: space-evenly;            padding-left: 20px;            box-sizing: border-box;            .time {                display: flex;                justify-content: space-between;                color: #fff;                span {                    font-size: 19px;                    line-height: 1;                }            }            .bar {                height: 8px;                background-color: #fbfbfb;                border-radius: 8px;                position: relative;                border-radius: 8px;                overflow: hidden;                cursor: pointer;                &__slid {                    position: absolute;                    left: 0;                    top: 0;                    background-color: #e24d80;                    height: 100%;                    width: 0;                    transition: width 0.3s;                }            }        }    }    &__btn {        position: absolute;        right: 30px;        top: 10px;        i {            font-size: 18px;            color: #fff;            cursor: pointer;        }    }    &__mask {        background-image: url('../../assets/meet.jpg');        z-index: -2;        background-repeat: no-repeat;        background-size: cover;        background-position: 50%;        filter: blur(15px);        opacity: 0.5;        transition: all 0.8s;        position: absolute;        top: 0;        right: 0;        left: 0;        bottom: 0;        &::before {            position: absolute;            top: 0;            right: 0;            left: 0;            bottom: 0;            z-index: -1;            content: '';            background-color: rgba(0, 0, 0, 0.08);        }    }}</style>

github完整代码用vue简单写一个音乐播放组件

github：

audio相关

HTML audio基础API完全使用指南

地址：

推荐Vue学习资料文章：

《为什么Vue3.0不再使用defineProperty实现数据监听？》

《「干货」学会这些Vue小技巧，可以早点下班和女神约会》

《探索 Vue-Multiselect》

《细品30张脑图带你从零开始学Vue》

《Vue后台项目中遇到的技术难点以及解决方案》

《手把手教你Electron + Vue实战教程（五）》

《手把手教你Electron + Vue实战教程（四）》

《手把手教你Electron + Vue实战教程（三）》

《手把手教你Electron + Vue实战教程（二）》

《手把手教你Electron + Vue实战教程（一）》

《收集22种开源Vue模板和主题框架「干货」》

《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》

《手把手教你实现一个Vue自定义指令懒加载》

《基于 Vue 和高德地图实现地图组件「实践」》

《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》

《是什么让我爱上了Vue.js》

《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》

《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》

《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》

《尤大大细说Vue3 的诞生之路「译」》

《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》

《大厂Code Review总结Vue开发规范经验「值得学习」》

《Vue3 插件开发详解尝鲜版「值得收藏」》

《带你五步学会Vue SSR》

《记一次Vue3.0技术干货分享会》

《Vue 3.x 如何有惊无险地快速入门「进阶篇」》

《「干货」微信支付前后端流程整理(Vue+Node)》

《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》

《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》

《「干货」Vue+Element前端导入导出Excel》

《「实践」Deno bytes 模块全解析》

《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》

《基于vue + element的后台管理系统解决方案》

《Vue仿蘑菇街商城项目（vue+koa+mongodb）》

《基于 electron-vue 开发的音乐播放器「实践」》

《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》

《基于 Vue 技术栈的微前端方案实践》

《消息队列助你成为高薪 Node.js 工程师》

《Node.js 中的 stream 模块详解》

《「干货」Deno TCP Echo Server 是怎么运行的？》

《「干货」了不起的 Deno 实战教程》

《「干货」通俗易懂的Deno 入门教程》

《Deno 正式发布，彻底弄明白和 node 的区别》

《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》

《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》

《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》

《深入Vue 必学高阶组件 HOC「进阶篇」》

《深入学习Vue的data、computed、watch来实现最精简响应式系统》

《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》

《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》

《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》

《2020前端就业Vue框架篇「实践」》

《详解Vue3中 router 带来了哪些变化？》

《Vue项目部署及性能优化指导篇「实践」》

《Vue高性能渲染大数据Tree组件「实践」》

《尤大大细品VuePress搭建技术网站与个人博客「实践」》

《10个Vue开发技巧「实践」》

《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》

《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》

《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》

《实践Vue 3.0做JSX(TSX)风格的组件开发》

《一篇文章教你并列比较React.js和Vue.js的语法【实践】》

《手拉手带你开启Vue3世界的鬼斧神工【实践】》

《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》

《怎样为你的 Vue.js 单页应用提速》

《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》

《Vue真是太好了 壹万多字的Vue知识点 超详细!》

《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》

《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》

《手把手教你深入浅出vue-cli3升级vue-cli4的方法》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》

《Vue3 尝鲜》

《总结Vue组件的通信》

《Vue 开源项目 TOP45》

《2020 年，Vue 受欢迎程度是否会超过 React？》

《尤雨溪：Vue 3.0的设计原则》

《使用vue实现HTML页面生成图片》

《实现全栈收银系统（Node+Vue）（上）》

《实现全栈收银系统（Node+Vue）（下）》

《vue引入原生高德地图》

《Vue合理配置WebSocket并实现群聊》

《多年vue项目实战经验汇总》

《vue之将echart封装为组件》

《基于 Vue 的两层吸顶踩坑总结》

《Vue插件总结【前端开发必备】》

《Vue 开发必须知道的 36 个技巧【近1W字】》

《构建大型 Vue.js 项目的10条建议》

《深入理解vue中的slot与slot-scope》

《手把手教你Vue解析pdf(base64)转图片【实践】》

《使用vue+node搭建前端异常监控系统》

《推荐 8 个漂亮的 vue.js 进度条组件》

《基于Vue实现拖拽升级（九宫格拖拽）》

《手摸手，带你用vue撸后台 系列二(登录权限篇)》

《手摸手，带你用vue撸后台 系列三(实战篇)》

《前端框架用vue还是react？清晰对比两者差异》

《Vue组件间通信几种方式，你用哪种？【实践】》

《浅析 React / Vue 跨端渲染原理与实现》

《10个Vue开发技巧助力成为更好的工程师》

《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》

《1W字长文+多图，带你了解vue的双向数据绑定源码实现》

《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》

《手把手教你D3.js 实现数据可视化极速上手到Vue应用》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》

《Vue3.0权限管理实现流程【实践】》

《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》

作者：vipbic

转发链接：