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 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP连接access数据库
2015/03/27 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
JS获取父节点方法
2009/08/20 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
javascript实现简易计算器
2017/02/01 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
基于Python的文件类型和字符串详解
2017/12/21 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
职务聘任书范文
2014/03/29 职场文书
专家推荐信模板
2014/05/09 职场文书
优秀高中学生评语
2014/12/30 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Pillow图像处理库安装及使用
2022/04/12 Python