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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript 播放器 控制
详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link href="style/style.css&quo
-
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu
-
(jsp/html)网页上嵌入播放器(常用播放器代码整理)
这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码 代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA
-
JavaScript实现简单音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. 这样看起来有点单调. 我们把它加在网页上试试. 具体效果可以去我的个人网站查看http://tcxqq.top 好了,成品已经展示了接下来,开干吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset=
-
JavaScript实现带播放列表的音乐播放器实例分享
代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
js实现的万能flv网页播放器代码
本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript"> var s5 = new SWFObject("FlvPlayer20
-
运用js教你轻松制作html音乐播放器
用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc
-
比较炫的图片播放器 js 焦点效果代码
图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a
-
Js视频播放器插件Video.js使用方法详解
Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="video.js"
-
javascript实现简单的html5视频播放器
效果: 代码很简单 js define("html5_video_player", [ '../avalon-min'], function(avalon) { function formatTime(seconds) { var seconds = Math.round(seconds); var minutes = Math.floor(seconds / 60); seconds = Math.floor(seconds % 60); minutes = (minutes >