html5+css3 制作音乐播放器
//css//
body , html{
margin:0;
padding:0;
font:12px Arial, Helvetica, sans-serif;
}
.MusicBox
{
background-color: #212121;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121));
background-image: -webkit-linear-gradient(top, #1B1B1B, #212121);
background-image: -moz-linear-gradient(top, #1B1B1B, #212121);
background-image: -ms-linear-gradient(top, #1B1B1B, #212121);
background-image: -o-linear-gradient(top, #1B1B1B, #212121);
background-image: linear-gradient(top, #1B1B1B, #212121);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
opacity:0.9;
padding:2px 5px;
position:absolute;
z-index:9;
border-width: 1px;
border-style: solid;
border-color: #488BF0 #488BF0 #488BF0 #488BF0;
width:810px;
height:40px;
}
.LeftControl
{
width:0px;
padding: 10px 10px 10px 10px;
float:left;
height:20px;
background:url(sk-dark.png) left 2px no-repeat;
margin-right:8px;
margin-left:10px;
}
.LeftControl:hover
{
background:url(sk-dark.png) left -30px no-repeat;
}
.RightControl
{
width:0px;
padding: 10px 10px 10px 10px;
float:left;
height:20px;
background:url(sk-dark.png) left -62px no-repeat;
margin-right:8px;
}
.RightControl:hover
{
background:url(sk-dark.png) left -93px no-repeat;
}
.ProcessControl
{
width:500px;
padding: 5px 10px 10px 10px;
float:left;
height:20px;
margin-right:12px;
color:#ffffff;
}
.ProcessControl .SongName
{
float:left;
}
.ProcessControl .SongTime
{
float:right;
}
.ProcessControl .Process
{
width: 500px;
float: left;
height: 2px;
cursor: pointer;
background-color:#000000;
margin-top:7px;
}
.ProcessControl .ProcessYet
{
width: 0px;
position:absolute;
height: 2px;
left:131px;
top:30px;
cursor: pointer;
background-color:#7A8093;
}
.VoiceEmp
{
width:0px;
padding: 10px 10px 10px 10px;
float:left;
height:17px;
background:url(sk-dark.png) -28px -180px no-repeat;
margin-right:2px;
}
.VoiceEmp:hover
{
background:url(sk-dark.png) -28px -212px no-repeat;
}
.VoidProcess
{
width: 66px;
height: 2px;
cursor: pointer;
background-color:#000;
float:left;
margin-top:19px;
margin-right:6px;
}
.VoidProcessYet
{
width: 66px;
position:absolute;
height: 2px;
left:675px;
top:21px;
cursor: pointer;
background-color:#7A8093;
}
.VoiceFull
{
width:0px;
padding: 10px 10px 10px 10px;
float:left;
height:17px;
background:url(sk-dark.png) -28px -116px no-repeat;
}
.VoiceFull:hover
{
background:url(sk-dark.png) -28px -148px no-repeat;
}
.MainControl
{
width:25px;
padding: 10px 15px 5px 10px;
float:left;
height:20px;
background:url(sk-dark.png) -80px -130px no-repeat;
}
.MainControl:hover
{
background:url(sk-dark.png) -80px -166px no-repeat;
}
.StopControl
{
width:14px;
padding: 10px 10px 5px 10px;
float:left;
height:20px;
background:url(sk-dark.png) -50px -130px no-repeat;
margin-right:16px;
}
.StopControl:hover
{
background:url(sk-dark.png) -50px -165px no-repeat;
}
.MusicList
{
background-color:#0FF;
border-width: 1px;
border-style: solid;
border-color: #488BF0 #488BF0 #488BF0 #488BF0;
width:600px;
height:200px;
opacity:0.9;
padding:2px 5px;
position:absolute;
z-index:1000;
display:none;
}
.MusicList .url
{
background-color:#FFF;
font:14px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:158px;
height:200px;
float:left;
}
.MusicList .List
{
background-color: #212121;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:410px;
height:180px;
float:right;
overflow:hidden;
padding:10px 13px;
color:#fff;
}
.MusicList .List .Single
{
width:100%;
float:left;
overflow:hidden;
height:15px;
font-size:13px;
cursor:pointer;
margin-bottom:8px;
}
.MusicList .List .Single .SongName
{
width:90%;
float:left;
}
.ShowMusicList
{
width:10px;
padding: 10px 10px 5px 10px;
float:left;
height:10px;
background:#039;
margin:5px 0 0 12px;
cursor:pointer;
}
.ShowMusicList:hover
{
background:red;
}
//js//
$(document).ready(function () {
//获取音频工具
var audio = document.getElementById("myMusic");
//alert("aaa");
//开始，暂停按钮
$("#MainControl")._toggle(function () {
$(this).removeClass("MainControl").addClass("StopControl");
if (audio.src == "") {
var Defaultsong = $(".Single .SongName").eq(0).attr("KV");
$(".MusicBox .ProcessControl .SongName").text(Defaultsong);
$(".Single .SongName").eq(0).css("color", "#7A8093");
audio.src = "Media/" + Defaultsong + ".mp3";
}
audio.play();
TimeSpan();
}, function () {
$(this).removeClass("StopControl").addClass("MainControl");
audio.pause();
});
//歌曲列表的选择操作
$(".MusicList .List .Single .SongName").click(function () {
$(".MusicList .List .Single .SongName").css("color", "#fff");
$("#MainControl").removeClass("MainControl").addClass("StopControl");
$(this).css("color", "#7A8093");
var SongName = $(this).attr("KV");
$(".MusicBox .ProcessControl .SongName").text(SongName);
audio.src = "Media/" + SongName + ".mp3";
audio.play();
TimeSpan();
});
//左前进按钮
$(".LeftControl").click(function () {
$(".MusicList .List .Single .SongName").each(function () {
if ($(this).css("color") == "rgb(122, 128, 147)") {
var IsTop = $(this).parent(".Single").prev(".Single").length == 0 ? true : false; //检查是否是最顶端的歌曲
var PrevSong;
if (IsTop) {
PrevSong = $(".Single").last().children(".SongName").attr("KV");
$(".Single").last().children(".SongName").css("color", "#7A8093");
}
else {
PrevSong = $(this).parent(".Single").prev(".Single").children(".SongName").attr("KV");
$(this).parent(".Single").prev(".Single").children(".SongName").css("color", "#7A8093");
}
audio.src = "Media/" + PrevSong + ".mp3";
$(".MusicBox .ProcessControl .SongName").text(PrevSong);
$(this).css("color", "#fff");
audio.play();
return false; //代表break
}
})
});
//右前进按钮
$(".RightControl").click(function () {
$(".MusicList .List .Single .SongName").each(function () {
if ($(this).css("color") == "rgb(122, 128, 147)") {
var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false; //检查是否是最尾端的歌曲
var NextSong;
if (IsBottom) {
NextSong = $(".Single").first().children(".SongName").attr("KV");
$(".Single").first().children(".SongName").css("color", "#7A8093");
}
else {
NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
$(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093");
}
audio.src = "Media/" + NextSong + ".mp3";
$(".MusicBox .ProcessControl .SongName").text(NextSong);
$(this).css("color", "#fff");
audio.play();
return false; //代表break
}
})
});
//静音按钮
$(".VoiceEmp").click(function () {
$(".VoidProcessYet").css("width", "0");
audio.volume = 0;
});
//满音量按钮
$(".VoiceFull").click(function () {
$(".VoidProcessYet").css("width", "66px");
audio.volume = 1;
});
/*
之前一直考虑进度条的原理，这边进度条的做法启发自腾讯一款播放器的做法，采用两个2px高度的div，重叠，
上面那个与下面那个div的颜色不一样，用于区分进度,顶层div的width是根据播放的长度来调整的，width越长，说明播放越长，
知道上层的div完全覆盖下面的div，达到长度的一致，说明播放完毕。我们的播放进度条和音量进度条都是这样做的
*/
// 音频进度条事件（进度增加）
$(".Process").click(function (e) {
//播放进度条的基准参数
var Process = $(".Process").offset();
var ProcessStart = Process.left;
var ProcessLength = $(".Process").width();
var CurrentProces = e.clientX - ProcessStart;
DurationProcessRange(CurrentProces / ProcessLength);
$(".ProcessYet").css("width", CurrentProces);
});
//音频进度条事件（进度减少）
$(".ProcessYet").click(function (e) {
//播放进度条的基准参数
var Process = $(".Process").offset();
var ProcessStart = Process.left;
var ProcessLength = $(".Process").width();
var CurrentProces = e.clientX - ProcessStart;
DurationProcessRange(CurrentProces / ProcessLength);
$(".ProcessYet").css("width", CurrentProces);
});
//音量进度条事件（进度增加）
$(".VoidProcess").click(function (e) {
//音量进度条的基准参数
var VoidProcess = $(".VoidProcess").offset();
var VoidProcessStart = VoidProcess.left;
var VoidProcessLength = $(".VoidProcess").width();
var CurrentProces = e.clientX - VoidProcessStart;
VolumeProcessRange(CurrentProces / VoidProcessLength);
$(".VoidProcessYet").css("width", CurrentProces);
});
//音量进度条时间（进度减少）
$(".VoidProcessYet").click(function (e) {
//音量进度条的基准参数
var VoidProcess = $(".VoidProcess").offset();
var VoidProcessStart = VoidProcess.left;
var VoidProcessLength = $(".VoidProcess").width();
var CurrentProces = e.clientX - VoidProcessStart;
VolumeProcessRange(CurrentProces / VoidProcessLength);
$(".VoidProcessYet").css("width", CurrentProces);
});
//显示音乐列表事件
$(".ShowMusicList").toggle(function () {
$(".MusicList").show();
var MusicBoxRight = $(".MusicBox").offset().left + $(".MusicBox").width();
var MusicBoxBottom = $(".MusicBox").offset().top + $(".MusicBox").height();
$(".MusicList").css("left", MusicBoxRight - $(".MusicList").width());
$(".MusicList").css("top", MusicBoxBottom + 15);
}, function () {
$(".MusicList").hide();
});
//监听媒体文件结束的事件（ended），这边一首歌曲结束就读取下一首歌曲，实现播放上的循环播放
audio.addEventListener('ended', function () {
$(".MusicList .List .Single .SongName").each(function () {
if ($(this).css("color") == "rgb(122, 128, 147)") {
var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false; //检查是否是最尾端的歌曲
var NextSong;
if (IsBottom) {
NextSong = $(".Single").first().children(".SongName").attr("KV");
$(".Single").first().children(".SongName").css("color", "#7A8093");
}
else {
NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
$(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093");
}
audio.src = "Media/"+ NextSong + ".mp3";
$(".MusicBox .ProcessControl .SongName").text(NextSong);
$(this).css("color", "#fff");
audio.play();
return false; //代表break
}
});
}, false);
});
//音量进度条的转变事件
function VolumeProcessRange(rangeVal) {
var audio = document.getElementById("myMusic");
audio.volume = parseFloat(rangeVal);
}
//播放进度条的转变事件
function DurationProcessRange(rangeVal) {
var audio = document.getElementById("myMusic");
audio.currentTime = rangeVal * audio.duration;
audio.play();
}
//播放事件
function Play(obj) {
var SongUrl = obj.getAttribute("SongUrl");
var audio = document.getElementById("myMusic");
audio.src = "Media/" + SongUrl + ".mp3";
audio.play();
TimeSpan();
}
//暂停事件
function Pause() {
var audio = document.getElementById("myMusic");
$("#PauseTime").val(audio.currentTime);
audio.pause();
}
//继续播放事件
function Continue() {
var audio = document.getElementById("myMusic");
audio.startTime = $("PauseTime").val();
audio.play();
}
//时间进度处理程序
function TimeSpan() {
var audio = document.getElementById("myMusic");
var ProcessYet = 0;
setInterval(function () {
var ProcessYet = (audio.currentTime / audio.duration) * 500;
$(".ProcessYet").css("width", ProcessYet);
var currentTime = timeDispose(audio.currentTime);
var timeAll = timeDispose(TimeAll());
$(".SongTime").html(currentTime + " | " + timeAll);
}, 1000);
}
//时间处理，因为时间是以为单位算的，所以这边执行格式处理一下
function timeDispose(number) {
var minute = parseInt(number / 60);
var second = parseInt(number % 60);
minute = minute >= 10 ? minute : "0" + minute;
second = second >= 10 ? second : "0" + second;
return minute + ":" + second;
}
//当前歌曲的总时间
function TimeAll() {
var audio = document.getElementById("myMusic");
return audio.duration;
}
//html//
<!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">
<head>
<title>music</title>
<script src="jquery-1.4.1.min.js" type="text/javascript" ></script>
<script src="music.js" type="text/javascript" ></script>
<link type="text/css" href="music.css" rel="Stylesheet" />
</head>
<body>
<audio id="myMusic" > </audio>
<input id="PauseTime" type="hidden" />
<div class="MusicBox" >
<div class="LeftControl" ></div>
<div id="MainControl" class="MainControl" ></div>
<div class="RightControl" ></div>
<div class="ProcessControl">
<div class="SongName">Blockly Music!</div> <div class="SongTime">00:00 | 00:00</div>
<div class="Process" ></div>
<div class="ProcessYet"></div>
</div>
<div class="VoiceEmp"></div>
<div class="VoidProcess" ></div>
<div class="VoidProcessYet" ></div>
<div class="VoiceFull" ></div>
<div class="ShowMusicList" >▽</div>
</div>
<div class="MusicList">
<div class="url" >也可以输入音乐url</div>
<div class="List" >
<div class="Single" ><span class="SongName" KV="情歌" >01.情歌</span> </div>
<div class="Single" ><span class="SongName" KV="因为爱情">02.因为爱情</span> </div>
<div class="Single" ><span class="SongName" KV="李克勤月半小夜曲">03.李克勤月半小夜曲</span> </div>
<div class="Single" ><span class="SongName" KV="Beyond、黄家驹 - 喜欢你">04.Beyond、黄家驹 - 喜欢你</span> </div>
<div class="Single" ><span class="SongName" KV="德国第一装甲师进行曲">05.德国第一装甲师进行曲</span> </div>
</div>
</div>
</body>
</html>
申明：本人小白 文章参考别人 并整合 经测试无问题 用于自勉学习 ！
html5+css3 制作音乐播放器的更多相关文章
- HTML+纯JS制作音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...
- Android 音视频深入 十三 OpenSL ES 制作音乐播放器，能暂停和调整音量（附源码下载）
项目地址https://github.com/979451341/OpenSLAudio OpenSL ES 是基于NDK也就是c语言的底层开发音频的公开API,通过使用它能够做到标准化, 高性能,低 ...
- html5，audio音乐播放器
最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...
- HTML5 javascript实现音乐播放器
准备毕业了,感觉好多东西都没学会,太多太多想学的知识,有种求知若渴的状态. 四年的大学就剩下一个多月了,无论将来多么困难,这条路是自己选的,走就要走的精彩! 自学了一点javascript.php,做 ...
- 用javascript和html5做一个音乐播放器，附带源码
效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 输入搜索关键词,点击放大镜图标 7.侧边栏 目录结构 开发心得与总结 1.轮播图 首先感谢作者S ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 【重点突破】——Canvas技术绘制音乐播放器界面
一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求 点 ...
- HTML5网页音乐播放器
1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...
- html5版 音乐播放器
html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...
随机推荐
- cursor中的url整理
浏览器中如何做才能使鼠标改变成自定义的图片,即用curosr:url属性,格式为{cursor:url('路径'),auto;}//IE,FF,chrome浏览器都可以,其中前面的url是自定义鼠标图 ...
- python中的告警处理
在Python中,遇到异常时,一类是直接抛出异常,exception:另一类直接告警warning. 对于后者,通常是打印一句话.前者则或中断程序执行. 考虑到避免由于告警导致后续的不可预知的错误,可 ...
- win10使用小技巧以及常见问题处理方案
1.win10开机一直处于黑屏状态或者反复重启怎么处理? 处理小方法:开机按win+X组合件进入高级修复模式---选择修复开启模式---f4进入安全模式开机状态---管理控制面板---禁用或者卸载显卡 ...
- IntelliJ Idea 集成svn 和使用
最近公司的很多同事开始使用svn,便尝试了一下,虽然快捷键与eclipse 有些不同,但是强大的搜索功能与"漂亮的界面"(个人认为没有eclipse好看 ),还是值得我们去使用的. ...
- memcached+magent实现memcached集群
首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Memcache服务器来存储不同的数据,最大程度的使用相同的资源:无法同步数据,容易造成单点故障.(memagent代 ...
- spring boot分布式技术，spring cloud，负载均衡，配置管理器
spring boot分布式的实现,使用spring cloud技术. 下边是我理解的spring cloud的核心技术: 1.配置服务器 2.注册发现服务器eureka(spring boot默认使 ...
- C1000k 新思路：用户态 TCP/IP 协议栈
现在的服务器支撑上百万个并发 TCP 连接已经不是新闻(余锋2010年的演讲,ideawu 的 iComet 开源项目,WhatsApp 做到了 2.5M).实现 C1000k 的常规做法是调整内核参 ...
- Sprint 3 回顾与总结 和团队贡献分 以及Sprint 1、2、3 总概
团队情况: 团队名称:Heaven Fire 团队博客地址:https://home.cnblogs.com/u/gjpg/ 团队Github地址:ht ...
- 父窗口，子窗口之间的JS"通信"方法
今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...
- firefox的console log功能
http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html Firebug是网页开发的利器,能够极大地提升工作效率. 但是 ...