移动端自定义音频播放器

文章目录

1、自定义的音频播放器效果图
2、代码
3、使用说明
4、用到的图片

1、自定义的音频播放器效果图

2、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>.img-box {display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px 0;}.title {text-align: center;line-height: 40px;font-size: 16px;color: #aaa;}.img-rad {display: block;border: 10px solid #ccc;border-radius: 50%;}.progress-box {display: flex;align-items: center;justify-content: space-between;}.progress {position: relative;width: 250px;height: 2px;background: #dadada;}.played {position: absolute;width: 0;height: 2px;z-index: 10;background: #ED2C28;left: 0;top: 0;}.time {position: absolute;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 10px;width: 80px;height: 20px;border-radius: 10px;z-index: 15;background: #434343;transform: translate(-40px -20px);left: 0;top: -9px;}.audio-box {display: flex;align-items: center;justify-content: space-between;padding: 10px 15px 0;}.icon-btn {display: flex;align-items: center;justify-content: center;}</style>
</head><body><div id="app"><div class="img-box"><div class="title">周深-起风了</div><img class="img-rad" src="http://p1.music.126.net/LpFu9pWQ3tzldjhkLwh4Vw==/109951165291444752.jpg" width="200" height="200" alt=""></div><div class="progress-box"><div @click="changeFifteen('left')"><img width="28" src="https://img-blog.csdnimg.cn/5258cffd0e3d4204855fb58bff908515.png" alt=""></div><div ref="progress" class="progress"><div :style="'width:' + sliderLeft + 'px'" class="played"></div><div class="time flex flex-item-center flex-just-center" ref="slider" id="slider" @touchstart="sliderTouchStart" @touchmove="sliderTouchMove($event)" @touchend="sliderTouchEnd" class="time absolute-container flex flex-item-center flex-just-center txt-white font10":style="'left:' + sliderLeft + 'px'"><span>{{currentTime | timeFormat}}</span>/<span>{{duration | timeFormat}}</span></div></div><div @click="changeFifteen('right')"><img width="28" src="https://img-blog.csdnimg.cn/7e24d2aabeb247ebbc8da8ff4369ae45.png" alt=""></div></div><div class="audio-box"><audio src="http://m10.music.126.net/20210904000543/c67d632954d70c2934c5c1ea1b816587/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3848922654/0b19/a863/3219/0a101cfe8374409a9219f806b445b14e.mp3" ref="audio" preload></audio><div><img width="23" src="https://img-blog.csdnimg.cn/54998c378177452f8bf9a5d66878087c.png" alt=""></div><div @click="play" v-if="is_play" class="icon-btn"><img width="65" src="https://img-blog.csdnimg.cn/6f282253d8a14cbeb19fa2031a30cf32.png" alt=""></div><div @click="play" v-else class="icon-btn"><img width="65" src="https://img-blog.csdnimg.cn/dd1bdfffd6644b43a02569562ff2e88a.png" alt=""></div><div><img width="23" src="https://img-blog.csdnimg.cn/972679878fa843d5bf4fbd34da6b8153.png" alt=""></div></div></div>
</body>
<script>var startvar leftnew Vue({el: '#app',data() {return {is_play: false, // 是否播放duration: 0, // 总时长(秒)currentTime: 0, // 已播放时长(秒)sliderLeft: 0, // 滑块已滑动距离(已播放颜色条宽度)slidePercent: 0, // 滑块已滑动百分比canSlideWidth: 0, // 滑块可滑动的距离progressWidth: 0, // 进度条的宽度isSlide: false // 是否正在拖动}},mounted: function() {// 滑块的宽度var sliderWidth = this.$refs.slider.offsetWidth// 进度条的宽度this.progressWidth = this.$refs.progress.offsetWidth// 滑块可滑动的宽度this.canSlideWidth = this.progressWidth - sliderWidth// 等待之后进行赋值，避免页面渲染还没有数据的情况setTimeout(() => {// 获取到音频元素var audio = this.$refs.audio;// 设置音频的总时长this.duration = audio.duration;// 监听音频实时数据audio.ontimeupdate = e => {// 当前播放的时间(正常播放的进度)this.currentTime = Math.floor(audio.currentTime);// 未拖动滑块时，滑块移动的距离if (!this.isSlide) {// 滑块移动距离 = (已播放时长 / 总时长) * 总滑动距离this.sliderLeft = audio.currentTime / audio.duration * this.canSlideWidth;}}}, 200)},filters: {// 将秒数进行格式化timeFormat(value) {var m = parseInt(value / 60)var s = parseInt(value % 60)m = m > 10 ? m : '0' + ms = s > 10 ? s : '0' + sreturn m + ':' + s}},methods: {// 控制播放/暂停play() {this.is_play = !this.is_playvar audio = this.$refs.audioif (audio.paused) {audio.play()} else {audio.pause()}},//进度条开始拖动sliderTouchStart(e) {e.preventDefault();// 修改拖动状态为正在拖动this.isSlide = true;// 页面宽度var pageWidth = document.body.clientWidth;// 触摸时滑块相对页面的位置start = e.touches[0].pageX;// 触摸点距滑块左边缘的距离 = 触摸时滑块相对页面的位置 - (页面宽度 - 进度条的宽度) / 2 - 滑块相对进度条左端的距离left = start - (pageWidth - this.progressWidth) / 2 - this.$refs.slider.offsetLeft},sliderTouchMove(e) {// 页面宽度var pageWidth = document.body.clientWidth;// 触摸点距页面左边缘的距离var pageX = e.touches[0].pageX// 滑动距离占进度条的百分比 = (触摸点距页面左端距离 - (页面宽度 - 进度条宽度) / 2 - 触摸点距滑块左边的相对位置) / 可滑动的总距离var sliderLeft = (pageX - (pageWidth - this.progressWidth) / 2 - left) / this.canSlideWidth;// 控制左右滑动不超出进度条范围(0 < 百分比 < 1)if (sliderLeft > 1) sliderLeft = 1;if (sliderLeft < 0) sliderLeft = 0;// 滑块的定位left值，确定滑块位置this.slidePercent = sliderLeft;// 已滑动的距离(已播放颜色条宽度)this.sliderLeft = sliderLeft * this.canSlideWidth;},//进度条托动放开sliderTouchEnd() {// 修改拖动状态为this.isSlide = false;var audio = this.$refs.audio;audio.currentTime = audio.duration * this.slidePercent},// 快进快退15秒changeFifteen(direction) {var audio = this.$refs.audioif (direction == 'left') {audio.currentTime -= 15} else {audio.currentTime += 15}this.sliderLeft = audio.currentTime / audio.duration * this.canSlideWidth}}});
</script></html>

3、使用说明

（1）这个效果是h5引入vue写成的
（2）封装成组件的话需要自己修改一些东西
（3）音乐链接可能已失效，请自行输入音乐链接

4、用到的图片

移动端自定义音频播放器相关推荐

vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
自定义音频播放器_创建自定义HTML5音频播放器
自定义音频播放器在本教程中,我将向您介绍HTML5音频,并向您展示如何创建自己的播放器. 如果您想走捷径,请查看Envato市场上可用的现成的HTML5音频播放器 . 它使您可以从各种来源创建播放列 ...
polymer ajax_使用Polymer创建自定义音频播放器元素
polymer ajax 什么是聚合物? (What is Polymer?) Polymer is a shim for a new web standard called Web Componen ...
Vue实现自定义音频播放器组件
效果图 components template <div class='daudio'><audio ref="audio" @timeupdate=" ...
微信小程序：音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
自定义制作音频播放器_使用HTML5制作音频播放器，第3部分：微数据和皮肤
自定义制作音频播放器 In the first two articles of this series I introduced the concept and code of a customize ...
audiojs--跨浏览器的HTML音频播放器（可自定义样式）
一款跨浏览器的音频播放器,可惜例子和文档都比较少英文文档官网使用方法: 第一步引用文件: <script src="/audiojs/audio.min.js"> ...
电脑端音乐播放器html5,原生js的音频播放器，兼容pc端和移动端（原创）
插件描述:基于原生的音频播放器效果,小巧易用更新时间:2018/12/10 下午3:08:16 更新说明: 1. 更新demo的音频地址 2. 组件的图片地址使用本地base64的图片格式更新时间 ...
ffmpeg提取音频播放器总结
ffmpeg提取音频播放器总结: 一:简介从编写音频播放器代码到完成播放器编写,测试,整整5天的时间,这时间还不算之前对 ffmpeg熟悉的时间,可以说是历经千辛万苦,终于搞出来了,虽然最终效果 ...
Web端H.265播放器研发解密
音视频编解码对于前端工程师是一个比较少涉足的领域,涉及到流媒体技术中的文本.图形.图像.音频和视频多种理论知识的学习,才能够应用到具体实践中,本团队在多媒体领域深耕两年多,才算是有一定产出,我们自研w ...

移动端自定义音频播放器

文章目录

1、自定义的音频播放器效果图

2、代码

3、使用说明

4、用到的图片

移动端自定义音频播放器相关推荐

最新文章

热门文章