JavaScript实现简单的音乐播放器
更新时间：2022年08月14日 12:54:55 作者：致～命～伤
这篇文章主要为大家详细介绍了JavaScript实现简单的音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
相信在刚开始学习JavaScript的时候，很多人感到最困惑的就是回调函数了。本文通过一个小小的例子来分析回调函数的用法。对大家学习Javascript回调函数很有帮助，有需要的可以来参考学习。2016-08-08
这篇文章主要介绍了elementUI 设置input的只读或禁用的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道，各种网站都有应用，尤其是专业的图片类型的网站，感兴趣的朋友可以参考下2015-12-12
给一个存放数字或字符串的数组去重很简单,那么现在问题升级,如何一个数组a里面存放的元素是若干个数组,那么如何给这个数组a去重？本文给大家介绍了JS中给数组去重的方法小结,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了JS调用页面表格导出excel的具体实现,需要的朋友可以参考下2014-03-03
javascript 解决表单仍然提交即使监听处理函数返回false
解决表单依旧提交即使监听处理函数返回false2010-03-03
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
这篇文章主要介绍了TensorFlow.js 微信小程序插件开始支持模型缓存的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢?这篇文章主要给大家介绍了关于js代码判断是否处于微信浏览器内的两种方式,需要的朋友可以参考下2023-10-10
删除数组元素在工作中经常会用到，本文讲解一下Javascript根据下标删除数组元素的方法，需要了解的朋友可以参考下2012-12-12
最新评论