JavaScript实现简单的音乐播放器


Posted in Javascript onAugust 14, 2022

本文实例为大家分享了JavaScript实现简单音乐播放器的具体代码,供大家参考,具体内容如下

主要功能:快进、快退、暂停、上下一首、禁音、鼠标控制音量、自动下一首、显示歌名

<html>
<head>
    @*不提供音频*@
    <meta name="viewport" content="width=device-width" />
    <title>ceshi14</title>
</head>
<body>
    <div id="name">
    </div>
    <div> 
        <audio id="yinp"   controls="controls"autoplay="autoplay" >
            <source id="ss" src="~/images/Beautiful%20In%20White.mp3" type="audio/mpeg" />
        </audio>
    </div>
    <script>
        //在谷歌浏览器输入  chrome://flags/#autoplay-policy 
        // 第一个选项 Autoplay policy  设置为 no user gesture is required  :谷歌浏览器要调 才可以自动播放
        var i = 0;
        var shu = ['/images/Beautiful In White.mp3', '/images/%e6%b1%aa%e8%8b%8f%e6%b3%b7%20-%20%e5%b9%b4%e8%bd%ae.mp3','/images/%e9%99%88%e6%9f%8f%e5%ae%87%20-%20%e4%bd%a0%e7%9e%92%e6%88%91%e7%9e%92.mp3','/images/%e8%83%a1%e6%ad%8c%20-%20%e5%bf%98%e8%ae%b0%e6%97%b6%e9%97%b4.mp3','/images/%e5%8d%97%e5%be%81%e5%8c%97%e6%88%98%20-%20%e6%88%91%e7%9a%84%e5%a4%a9%e7%a9%ba.mp3','/images/%e5%91%a8%e6%9d%b0%e4%bc%a6%20-%20%e5%91%8a%e7%99%bd%e6%b0%94%e7%90%83.mp3','/images/%e8%83%a1%e5%a4%8f%20-%20%e5%90%8c%e6%a1%8c%e7%9a%84%e4%bd%a0.mp3'];//音频路径(转码)

        //控制播放 currentTime
        window.onkeydown = function (event) {
            var yinp = document.getElementById('yinp');
            if (event.keyCode == 32) {//空格控制播放
                if (yinp.paused) {//判断音频是否暂停
                    yinp.play();
                } else {
                    yinp.pause();
                }
            }
            if (event.keyCode == 13) {//回车控制是否禁音
                if (yinp.muted) {
                    yinp.muted = false;
                } else {
                    yinp.muted = true;
                }
            }

            if (event.keyCode == 27) {//Esc键关闭
                window.close();
            }

            if (event.keyCode == 39) {//右方向键快进
                yinp.pause();
                if (yinp.currentTime < yinp.duration-5) {//duration:音频总长度   currentTime:音频当前进度(当前长度)
                    yinp.currentTime += 1
                }             
            }

            if (event.keyCode == 37) {//左方向键快退
                yinp.pause();
                if (yinp.currentTime>1) {
                    yinp.currentTime -= 1
                }               
            }

            if (event.keyCode == 38) {//上方向键:上一曲(第一曲没作用)
                yinp.pause();
                if (i>0) {
                    i--;
                } else {
                    i = 0;
                }
                yinp.load();
                document.getElementById('ss').src = '' + shu[i] + '';
            }           
        
            if (event.keyCode == 40) {//下方向键:下一曲
                yinp.pause();
                if ((i + 1) == shu.length) {
                    i = 0;
                } else {
                    i++;
                }
                yinp.load();
                document.getElementById('ss').src = '' + shu[i] + '';
            }
        };
        //按键松开时播放
        window.onkeyup = function (event) {
            var yinp = document.getElementById('yinp');
            if (event.keyCode == 39) {
                yinp.play();
            }
            if (event.keyCode == 37) {
                yinp.play();
            }
            if (event.keyCode == 38) {
                yinp.play();
            }
            if (event.keyCode == 40) {
                yinp.play();
            }
        }

       //鼠标滚轮改变音量大小
        window.onwheel = function (event) {
            var yinp = document.getElementById('yinp');
            var pan = 0;
            if (event.wheelDelta) {            
                 pan = ((event.wheelDelta / 150) * 0.01).toFixed(2);              
            }
            if (event.detail) {
                pan = ((-event.detail / 3 ) * 0.01).toFixed(2);
            }
            var volume = Number((yinp.volume).toFixed(2));
            if (volume + Number(pan) > 1 || volume + Number(pan) < 0) {

            } else {
                yinp.volume = volume + Number(pan);
            }
        }
        
        function gename() {//歌名
            var name = document.getElementById('name');
            var s = decodeURI(shu[i])//解码
            var pp = /([^\\/]+)\.([^\\/]+)/i;//正则匹配歌名
            pp.test(s);
            name.innerHTML = RegExp.$1;
        }
      
        var yinp = document.getElementById('yinp');
        yinp.onplay = gename;//播放时显示歌名
        yinp.onended = function () {//结束时自动下一曲
            if ((i+1)==shu.length) {
                i = 0;
            } else {
                i++;
            }
            yinp.load();//重新加载
            document.getElementById('ss').src = '' + shu[i] + '';//更换音频路径
        }
    </script>
</body>
</html>

效果图:

JavaScript实现简单的音乐播放器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
vue实现简易音乐播放器
Aug 14 #Vue.js
Vue3实现简易音乐播放器组件
Aug 14 #Vue.js
element tree树形组件回显数据问题解决
Aug 14 #Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 #Vue.js
JavaScript实现音乐播放器
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
php图片添加水印例子
2016/07/20 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python实现多线程网页下载器
2018/04/15 Python
python学习开发mock接口
2019/04/28 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
摄影助理岗位职责
2014/02/07 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
公益广告语集锦
2014/03/13 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年共青团工作总结
2015/05/15 职场文书
毕业班工作总结
2015/08/10 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL