<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音乐小站</title>
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="font/iconfont.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<div id='music' class='music'>
<div id='trackBox' class="trackBox">
<i class='items'></i>
</div>
<div class='screen'>
<i id='music-icon' class="iconfont icon-icon-test r"></i>
<div class='progress'>
<div class='time'></div>
<div class='bar'></div>
</div>
</div>
<div class='buttons'>
<i id='prev' class="iconfont icon-shangyishou"></i>
<i id='play' class="iconfont icon-bofang"></i>
<i id='pause' class="iconfont icon-zanting" style="display:none"></i>
<i id='next' class="iconfont icon-xiayishou-copy"></i>
</div>
<span id='info' class='info'></span>
</div>
</body>
<script type="text/javascript">
/*//让元素居中的方法
function _center(dom){
dom.style.position = 'absolute';
dom.style.top = '50%';
dom.style.left = '50%';
dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
}
//根据id获取元素
function dom(id){
if(id.toString().indexOf('#') != -1) {
id = id.replace('#','');
}
return document.getElementById(id);
};
var musicDom = dom('#music');
_center(musicDom);
var musicIcon = dom('#music-icon');
_center(musicIcon);*/
/*var utils = {
_center : function(dom){
dom.style.position = 'absolute';
dom.style.top = '50%';
dom.style.left = '50%';
dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
},
dom : function(id){
if(id.toString().indexOf('#') != -1) {
id = id.replace('#','');
}
return document.getElementById(id);
},
}*/
var musicDom = utils.dom('#music');
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom);
utils._center(musicIcon);
/*
var playDom = utils.dom('#play');
var pauseDom = utils.dom('#pause');
playDom.onclick = function(){
this.style.display = 'none';
pauseDom.style.display = 'inline';
}
pauseDom.onclick = function(){
this.style.display = 'none';
playDom.style.display = 'inline';
}
*/
musicBox.init(); //初始化
musicBox.add('mp3/理想三旬.mp3');
musicBox.add('mp3/凉凉.mp3');
musicBox.add('mp3/岁月神偷.mp3');
musicBox.add('mp3/童话镇.mp3');
musicBox.add('mp3/我是你爸爸.mp3');
/* 获取开始按钮 */
var playDom = utils.dom('#play');
/* 获取暂停按钮 */
var pauseDom = utils.dom('#pause');
/* 获取下一首按钮 */
var nextDom = utils.dom('#next');
/* 获取上一首按钮 */
var prevDom = utils.dom('#prev');
//播放按钮
playDom.onclick = function(){
this.style.display = 'none';
pauseDom.style.display = 'inline';
utils.addClass(musicIcon,'r');
//播放音乐
musicBox.play();
infoDom.innerHTML = ''; //先清空上一次的信息
infoDom.innerHTML = musicBox.getCurrentSong();//显示当前的歌曲信息
}
//暂停按钮
pauseDom.onclick = function(){
this.style.display = 'none';
playDom.style.display = 'inline';
utils.removeClass(musicIcon,'r');
musicBox.stop();
}
//下一首
nextDom.onclick = function(){
musicBox.next();
//当直接点击下一首的时候,同时改变播放按钮为暂停的样式
playDom.style.display = 'none';
pauseDom.style.display = 'inline';
utils.addClass(musicIcon,'r');
infoDom.innerHTML = ''; //先清空上一次的信息
infoDom.innerHTML = musicBox.getCurrentSong();//显示当前的歌曲信息
}
//上一首
prevDom.onclick = function(){
musicBox.prev();
//当直接点击下一首的时候,同时改变播放按钮为暂停的样式
playDom.style.display = 'none';
pauseDom.style.display = 'inline';
utils.addClass(musicIcon,'r');
infoDom.innerHTML = ''; //先清空上一次的信息
infoDom.innerHTML = musicBox.getCurrentSong();//显示当前的歌曲信息
}
/* 获取歌曲的信息栏 */
var infoDom = utils.dom('#info');
/**
* 当音频时间正常更新的时候
*/
musicBox.musicDom.ontimeupdate = function(){
var currentTime = Math.floor(this.currentTime); //获取当前时间
var m = parseInt(currentTime / 60);//分钟
var s = parseInt(currentTime % 60);//秒钟
var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化
//console.log(time); //打印出来看看
document.getElementsByClassName('time')[0].innerHTML = time;
var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";
}
/*获取音轨盒子*/
var trackBox = utils.dom('#trackBox');
/*音轨盒子的宽度*/
var maxWidth = trackBox.clientWidth;
/*音轨的单个宽度*/
var singleWidth = 10;
/*计算音轨的最大数量*/
var len = Math.floor(maxWidth / singleWidth) ;
//alert('音轨盒子最多盛放' + len + '条音轨');
//拼接音轨
var tracks = "";
for(var i = 0;i < len; i++){
/*计算位置*/
var left = 10 * i + 'px';
tracks += "<i class='items' style='left:"+left+"'></i>";
}
trackBox.innerHTML = tracks;
//模拟音轨动画
setInterval(function(){
for(var i = 0;i < len; i++){
//console.info(i);
document.getElementsByClassName('items')[i].style.height = utils.randomNum(110) + 'px';
}
},200);
</script>
</html>
javascript实现音乐播放器
需积分: 50 154 浏览量
2017-11-16
18:32:52
上传
评论 2
收藏 29.08MB ZIP 举报
林猛男
- 粉丝: 183
- 资源: 11
最新资源
- 基于JavaScript的访客预约系统设计源码
- 基于Vue和ECharts的工作租房数据可视化系统设计源码
- 1040g0cg310ravpiu6ibg5pg00tsipsln3ju2d0g 2
- 基于Python的SAR图像去噪CNN-NLM设计源码
- redhat6升级到redhat7,过程redhat6.x-> redhat6.10->rehat7.9 主版本最高版本
- 基于Django的流程引擎设计源码
- 基于Node.js的Express框架与MySQL的后台管理系统设计源码
- 基于Java的Flink流批一体数据处理快速集成开发框架设计源码
- FirstFilterOrderCompare
- Screenshot_2024-03-28-19-17-25-020_com.ss.android.lark.jpg
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈