如何用JS实现一个基本功能的音乐播放器
Admin 2022-09-20 群英技术资讯 289 次浏览
主要功能:快进、快退、暂停、上下一首、禁音、鼠标控制音量、自动下一首、显示歌名
<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>
效果图:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要给大家分享的是vue项目实现页面跳转的方法,vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下
本篇文章给大家带来了关于javascript的相关知识,其中主要整理了JavaScript事件的冒泡、委派、绑定和传播的相关问题,包括了冒泡事件、委派事件、通过addEventListener()绑定事件等等内容,下面一起来看一下,希望对大家有帮助。
JavaScript实现简单的音乐播放器 本文实例为大家分享了JavaScript实现简单音乐播放器的具体代码,供大家参考,具体内容如下 主要功能:快进.快退.暂停.上下一首.禁音.鼠标控制音量.自动下一首.显示歌名 <html> <head> @*不提供音频*@ <meta name="viewport" content="width=device-width" /> <title>ceshi14</title> ...
如何现实小程序消息推送?这篇文章主要给大家介绍微信小程序消息推送的实现,文本代码具有一定的借鉴价值,有需要的朋友可以参考参考,下面就跟随小编一起来了解一下吧。
jquery修改某一行值的方法:1、利用eq()方法获取指定行元素对象,语法为“元素对象.eq(行元素的索引)”;2、利用html()方法来修改已获取到指定行元素对象的值,语法为“行元素对象.html(修改后的值)”。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008