html5音乐播放器
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jQuery/jquery-3.4.1.min.js"></script>
<style type="text/css">
.box{
width: 630px;
height: 400px;
/*background-color: grey;*/
margin-left: 350px;
/*z-index: 30;*/
position: relative;
}
/*音乐*/
.music{
text-align: center;
}
/*标题*/
h3{
text-align: center;
}
/*进度条*/
.jdt{
width: 500px;
height: 10px;
border-radius: 10px;
border: 1px solid;
margin-left: 50px;
margin-top:50px;
position: relative; /*条父级要加定位*/
}
.manxue{
width: 20px;
height: 20px;
top: -5px;
left: -1px;
border-radius: 20px;
background-color: yellowgreen;
position: absolute;
}
a{
display: block;
width: 600px;
height: 20px;
text-align: center;
margin-top: 15px;
}
.aud{
text-align: center;
margin-left: 140px;
margin-top: 30px;
}
.max{
position: relative;
}
.mis{
width: 630px;
height: 400px;
position: absolute;
/*display: none;*/
top: 0px;
left: 350px;
}
.mis img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="max">
<div class="mis"><img src="../../高级js/img/0.jpg"/></div>
<div class="mis"><img src="../../高级js/img/1.jpg"/></div>
<div class="mis"><img src="../../高级js/img/2.jpg"/></div>
<div class="mis"><img src="../../高级js/img/3.jpg"/></div>
</div>
<div class="box">
<h3>我的音乐播放器</h3>
<div class="anniu">
<button class="btn">播放</button>
<button class="btn">音量+</button>
<button class="btn">音量-</button>
<button class="btn">快进</button>
<button class="btn">快退</button>
<button class="btn">上一曲</button>
<button class="btn">下一曲</button>
<button class="btn">静音</button>
<button class="btn">重新加载</button>
<button class="btn">循环播放</button>
</div>
<div class="music">
<a href="javascript:;">同桌的你</a>
<a href="javascript:;">征服</a>
<a href="javascript:;">水手</a>
<a href="javascript:;">练习</a>
</div>
<audio class="aud" src="mp3/征服.mp3" controls></audio>
<div class="jdt">
<div class="manxue"></div>
</div>
</div>
<script type="text/javascript">
//获取各个功能的按键
var btn=document.getElementsByClassName('btn');
//获取媒体标签
var aud=document.getElementsByClassName('aud')[0];
//获取4首音乐的父级
var music=document.getElementsByClassName('music')[0];
//获取a标签
var a=document.getElementsByTagName('a');
//获取图片的img的父级
var mis=document.getElementsByClassName('mis');
//=====================播放和暂停功能================
btn[0].onclick=function(){
if(aud.paused){
aud.play();
this.innerText='暂停'
}else{
aud.pause();
this.innerText="播放"
}
}
//点击歌名播放功能 利用委托书事件 绑定父级
var tt; //定义全局变量以便后续使用
music.addEventListener('click',function(ev){
tt=ev.target
if(tt.nodeName=='A'){
playMusic(tt)
}
//循环遍历a标签
for(var i=0; i<a.length; i++){
//所有的class 类名去掉
a[i].className='';
}
//播放的这一首音乐上添加上一个类名
tt.className='music_class';
console.log()
for(var j=0; j<mis.length; j++){
console.log(j)
mis[j].style.display="none"
}
//获取正在播放音乐 的索引值 点击时让其显示
mis[getplay()].style.display='block'
})
//获取正在播放音乐 的索引值
function getplay(){
for(var i=0; i<a.length; i++){
//一个一个试看哪个a标签里面有类名找到他
if(a[i].getAttribute('class')=='music_class'){
console.log(i)
return i; //返回i的值
}
}
}
function playMusic(obj){
// console.log(obj.innerHTML)
//拼接路径
// console.log(obj)
aud.src='mp3/'+obj.innerText+'.mp3'
aud.play();
}
//===================音量的加减===================
btn[1].onclick=function(){
if (aud.volume>=1) {
return false;
}
aud.volume+=0.1
}
btn[2].onclick=function(){
if (aud.volume<0) {
return false;
}
aud.volume -= 0.1
}
//====================快进====================
btn[3].onclick=function(){
console.log(1)
aud.currentTime+=5;
}
//====================快退====================
btn[4].onclick=function(){
aud.currentTime-=5;
}
//===================上一曲 =======================
// btn[5].οnclick=function(){
// //判断如果此时为第一首歌
// if (tt==music.firstElementChild) {
// //把事件赋值为最后一首 并播放
// tt=music.lastElementChild
// playMusic(tt);
// return false; //必须写
// }
// // 如果if条件不成立 播放上一首
// playMusic(tt.previousElementSibling)
// //把事件源赋值给上一首以便点第二次是找到 第二次点击的上一首
// tt=tt.previousElementSibling;
//
// }
//方法二
btn[5].onclick=function(){
//调用函数等于i的值 把数字赋值给index
var index=getplay();
console.log(index);
//如果下标等于第一个0 让index=数组长度
if(index==0){
// console.log(index)
index=a.length
// console.log(index)
}
console.log(index)
aud.src="mp3/"+a[index-1].innerText+".mp3"
aud.play();
for(var j=0; j<a.length; j++){
a[j].className=''
}
//添加到当前正在播放的这首歌 里一个类名
a[index-1].className="music_class"
for(var j=0; j<mis.length; j++){
console.log(j)
mis[j].style.display="none"
}
mis[index-1].style.display='block'
}
//=======================下一曲 ==================
function xyq(){
//判断如果此时为第一首歌
// if (tt==music.lastElementChild) {
// //把事件赋值为最后一首 并播放
// tt=music.firstElementChild
// playMusic(tt);
// return false;
// }
// // 如果if条件不成立 播放下一首
//
// playMusic(tt.nextElementSibling)
//// console.log(tt)
// //把事件源赋值给上一首以便点第二次是找到 第二次点击的上一首
// tt=tt.nextElementSibling;
//方法二
//调用函数等于i的值 把数字赋值给index
var index=getplay();
// console.log(index)
//如果下标等于第一个0 让index=数组长度
if(index==a.length-1){
// console.log(index)
index=-1
// console.log(index)
}
// console.log(index)
aud.src="mp3/"+a[index+1].innerText+".mp3"
aud.play();
for(var j=0; j<a.length; j++){
a[j].className=''
}
a[index+1].className="music_class"
}
//点击调用下一曲
btn[6].onclick=function(){
xyq();
}
//=======================静音===================
btn[7].onclick=function(){
aud.muted = !aud.muted;
if(aud.muted){
this.innerHTML = "取消静音";
}else{
this.innerHTML = "静音";
}
}
//========================重新加载==================
btn[8].onclick=function(){
aud.load();
aud.play();
}
//=======================循环播放===================
var shuzu=['水手','征服','同桌的你','练习']
//点击事件 循环 变随机 随机变循环
btn[9].onclick=function(){
if (btn[9].innerText=="循环播放") {
console.log(1)
btn[9].innerText="随机播放"
return false; //必须写 不然的话又瞬间跳到下一个if
}
if (btn[9].innerText=="随机播放") {
btn[9].innerText="循环播放"
return false;
}
}
//当音乐播放结束时判断 播放模式 来选择怎么播放
function js(){
aud.onended=function(){
if (btn[9].innerText=='循环播放') {
//调用下一曲
xyq();
}
if (btn[9].innerText=='随机播放') {
//调用随机数
sjb();
}
}
}
js();
// ========================封装随机播放的函数===================
function sjb(){
var sjs=Math.round(Math.random()*3)
// console.log(sjs)
aud.src='mp3/'+shuzu[sjs]+'.mp3'
aud.play();
}
//=====================重点 进度条===================
var jdt=document.getElementsByClassName('jdt')[0]
var manxue=document.getElementsByClassName('manxue')[0]
//1歌曲播放时候进度条自己动
aud.ontimeupdate=function(){
//获取歌曲播放的 时间比例
var scale=aud.currentTime/aud.duration;
//设置进度条 的宽
manxue.style.left=scale*100+"%";
}
//拖动进度条，更新歌曲进度 同理拖拽事件
manxue.onmousedown=function(ev){
var ev=event||window.event;
// 鼠标距离元素的距离=鼠标距离左侧距离-元素距离左侧 的距离
var rw=ev.clientX-manxue.offsetLeft
console.log(ev.clientX)
// console.log(rw)
document.onmousemove=function(ev){
//元素距离左侧距离=鼠标距离左侧距离- rw
var new_w=ev.clientX-rw
console.log();
//安全判断
if (new_w>jdt.offsetWidth){
new_w=jdt.offsetWidth;
}
// 给元素赋值 距离左侧的距离
manxue.style.left=new_w+"px";
//算出进度条走过的比例
var scale=manxue.offsetLeft/jdt.offsetWidth;
// 歌曲播放的事件= 总时间* 比例
aud.currentTime=aud.duration*scale;
console.log(aud.currentTime)
js()//点用一下快要播放完毕这个函数
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
</script>
</body>
</html>
Jason–json
发布了73 篇原创文章 · 获赞 5 · 访问量 6726
私信
关注
标签：播放器,aud,音乐,height,width,html5,var,document,margin 来源： https://blog.csdn.net/weixin_46146313/article/details/104180899