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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
轮播图组件js代码
Aug 08 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
详解React中setState回调函数
Jun 14 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
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
ajax缓存问题解决途径
2006/12/06 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python字典基本操作实例分析
2015/07/11 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
C语言面试题
2013/05/19 面试题
《九寨沟》教学反思
2014/04/08 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
MySql新手入门的基本操作汇总
2021/05/13 MySQL
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server