移动端自定义音频播放器

最新推荐文章于 2023-01-10 09:07:14 发布
最新推荐文章于 2023-01-10 09:07:14 发布
阅读量225 收藏 1
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46189889/article/details/120092375
版权

文章目录

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 start
    var left
    new 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' + m
                s = s > 10 ? s : '0' + s
                return m + ':' + s
            }
        },
        methods: {
            // 控制播放/暂停
            play() {
                this.is_play = !this.is_play
                var audio = this.$refs.audio
                if (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.audio
                if (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、用到的图片

播放
下一首
快进15秒
暂停
上一首
快退15秒

yin_baoer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5自定义播放器（简式）
weixin_30894583的博客
02-22 1335
这是html5中自带的标签<video></video>,非常实用。使用这个标签有诸多好处（好处我就不多说了，详见谷歌、必应、百度）。 这个html5播放器的主体就是<video></video>标签的属性包括： ·src : 视频的URL ·poster : 视频封面，没有播放时显示的图片 ·preload : 预加载 ·autoplay...
适用于PC移动端的Vue音频播放器组件
08-10
Vue音频播放器组件是基于Vue.js框架开发的一款通用音频播放解决方案，它专为适应PC和移动端设备而设计。Vue.js是一个轻量级、高性能的前端MVVM（Model-View-ViewModel）框架，使得构建用户界面变得更为简洁和高效。...
基于 AVPlayer 自定义播放器
diancannei3748的博客
09-22 562
如果我只是简单的播放一个视频，而不需要考虑播放器的界面。iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewController. iOS9.0 之后，可以使用 AVPictureInPictureController, AVPlayerViewController, 或者 WKWebView。 ...
在 JavaScript 中使用 Waveform 构建自定义音频播放器
wouderw的博客
10-25 514
当您处理音频波形生成的大数据时，在网页中没有任何延迟的情况下更平滑、更快地绘制波形非常重要。，如折线、面积、饼图、范围、财务图表等，适用于不同的数据集和用例。如果您正在某个平台上工作，需要向用户播放一些音频，例如，出售一些音频文件，那么展示它的波形非常棒，这样用户就会对音频的结构以及您的内容印象深刻平台可以做。您甚至可以使用简单的 CSS 属性自定义音频播放器的外观和感觉，并通过更改 CanvasJS 图表属性将其与波形匹配。当音频开始播放时，对波形中已经播放过的区域进行阴影处理是一个不错的选择。
自定义播放器
weixin_30686845的博客
07-03 109
一、自定义视频播放器的主要API（更多可以查看参考手册） ①属性 controls：如果出现该属性，则向用户显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量 autoplay：如果出现该属性，则视频在就绪后马上播放。如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。 loop：loop：(循环播放)...
vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放（兼容微信浏览器）
搬砖团团长
10-28 1419
vue3.0 安卓和ios h5 移动端微信audio音频自定义圆环播放
基于vue的移动端音频播放器.zip
最新发布
03-07
【标题】"基于vue的移动端音频播放器"指的是一个使用Vue.js框架开发的适用于移动设备的音频播放应用程序。Vue.js是目前非常流行的前端JavaScript框架，它以轻量级、组件化开发著称，能帮助开发者高效构建用户界面。 ...
移动端精美的HTML5音乐播放器
05-06
【移动端精美的HTML5音乐播放器】是一款专为手机和平板等移动设备设计的音乐播放器，它利用了HTML5的音频API和jQuery库来实现流畅、互动性强的音乐播放功能。HTML5作为现代网页开发的标准，其音频元素（`<audio>`）...
基于 Vue 的小巧简单实用的 PC 移动端的 Vue 音频播放器组件.zip
03-07
这个名为“基于 Vue 的小巧简单实用的 PC 移动端的 Vue 音频播放器组件”的项目，显然旨在为开发者提供一个方便集成到 Vue 应用中的音频播放功能。通过这个组件，开发者可以在他们的网页或应用程序中添加音乐播放的...
多媒体播放器zyMedia移动端H5媒体播放器.zip
07-19
zyMedia 是由掌阅科技开源的基于HTML5 video和audio的自定义UI多媒体播放器，经过多种移动端设备环境的检测（尤其是国产设备和浏览器），已用于公司的产品线。 特点： 支持主流移动设备移动端浏览器，适合国内移动...
html5响应式触屏移动端音频播放器
11-07
html5响应式触屏移动端音频播放器 html5响应式触屏移动端音频播放器
一个自定义的html5视频播放器
阿酷tony
01-10 2898
一个自定义的html5视频播放器// 功能: // 1.视频的播放与暂停(图标变化) // 2.总时间的显示 // 3.当前时间的显示(进度) // 4.进度条的显示 // 5.跳跃播放 // 6.全屏
Vue实现自定义音频播放器组件
dss0225的博客
12-07 4192
Vue实现自定义组件音频播放组件
前端自定义播放器
weixin_45867761的博客
07-22 1014
默认的播放器在不同浏览器显示的不一样，所以需要自己写一个播放器已达统一。
移动端H5音频自动播放解决方案
baidu_36095053的博客
07-30 7510
IOS跟Android以及微信自带的浏览器为了用户体验，默认是已经屏蔽了autoplay属性。在这中情况下可以有几种曲线救国的方法。 1、触摸监听（touchstart）播放 严格意义上来讲，这不是自动播放，而是“仿真”、“模拟”、“虚假”的自动播放。原理是当用户触碰到屏幕就开始播放音频，以达到看起来好像是自动播放的假象。但如果用户就是打开页面，并没有触屏的话，那就不会播放了 <audio autoplay="autopaly" loop="loop" id="audios">
vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
朝阳39的博客
01-27 6683
相关技巧，详见注释 <template> <!-- 音乐播放器 --> <div class="container"> <h2>{{ musicName }}</h2> <audio ref="Ref_audioPlayer" controls :src="audioPathDic[musicName]" @ended="overAudio" @pause=.
Android自定义视频播放器（一）
热门推荐
scorpio的博客
08-08 1万+
一、引言 我们在开发Android多媒体应用时，有两种方式来播放多媒体资源。第一种是使用隐式的Intent，来使用系统或者手机已经安装的第三方播放器应用来播放音视频，第二种是使用Android自带的、我们自定义的播放器来播放，这种主要是采用Android提供的MediaPlayer和VideoView来播放多媒体文件，下面会逐一讲述。两种方式的代码如下： //隐式方式，使用第三方播放器 In...
自定义音乐播放器
xaioxaiobai的博客
10-26 412
音乐播放器
自定义视频播放器
qq_43235503的博客
10-24 224
JS自定义视频播放器
写一个移动端的音乐播放器的功能需求
04-23
好的，我明白了你的问题。以下是移动端音乐播放器的功能需求： 1. 音乐播放功能：能够播放本地或线上的音频文件，并支持播放、暂停、上一曲、下一曲等操作。 2. 歌曲分类功能：能够按照歌手、专辑、曲风等方式对歌曲进行分类。 3. 歌曲搜索功能：能够根据歌曲名称或歌手名称进行搜索，并支持模糊搜索。 4. 多种播放模式：支持顺序播放、随机播放、单曲循环等播放模式。 5. 歌曲下载功能：能够将线上的音频文件下载到本地，以便于离线播放。 6. 歌曲分享：能够将正在播放的歌曲分享到社交网络上，并支持自定义分享内容。 7. 歌词显示：支持歌词的实时滚动显示，并支持歌词自动匹配、手动编辑等功能。 8. 列表管理功能：能够对歌曲进行添加、删除、排序等操作，并支持歌曲列表的备份、恢复等功能。 9. 声音调节：支持音量调节、音效加强等功能，以提升音乐播放的质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值