JS事件笔记：音乐播放器

运用JavaScript制作一个网页音乐播放器。

静态图片：

HTML文件：

<body>
<!-- 音频 -->
<div id="musicplayer"><audio  id="music" src="#"></audio>
</div>
<!-- 音频 end --><!-- 播放器界面 -->
<div class="player_bg"><div class="cover"><div class="opc"></div><div class="musImg"><img id="image" src="#" alt=""></div><div class="musName" id="mName"></div><div class="playerNmae" id="pName"></div></div><div class="jindutiao" id="musBar"><div class="jindu" id="musJD"><div class="jinduyuan"></div></div><div class="time"><span class="beginTIme" id="bTime">00:00</span><span class="endTIme" id="eTime">00:00</span></div></div><div class="control"><div class="replay" id="replay"><span class="iconfont icon-replay"></span></div><select id="chagrSp" class="chagrSp"><option value="0.5">0.5</option><option value="1.0" selected>1.0</option><option value="1.5">1.5</option><option value="2.0">2.0</option></select><div class="change"><div class="prev cotrBtn" id="prev"><span class="iconfont icon-shangyishou"></span></div><div class="play cotrBtn" id="play"><span class="iconfont icon-play"></span></div><div class="next cotrBtn" id="next"><span class="iconfont icon-xiayishou"></span></div></div><div class="cotrVolBtn" id="cotrVolBtn"><span class="iconfont icon-yinliang"></span></div><div class="volCotr" id="musVol"><div class="handle" id="handle"><div class="yuan"></div></div></div><div class="volV" id="volV">100%</div></div>
</div>
<!-- 播放器界面 end -->
</body>

公共样式：

*{margin: auto;padding: 0;
}
ul,li,ol{list-style: none;
}
img{border:none;
}
a{list-style: none;text-decoration: none;color: #fff;
}
body{font-size: 14px;font-family: "Microsoft Yahei","Arial";color: #fff;background-color: #3f3d7e;
}

页面样式：

.player_bg{width: 600px;height: 400px;/*background-color: #a6c4ff;*/margin-top: 100px;overflow: hidden;position: relative;
}
.cover{width: 400px;height: 300px;border-radius: 20px 20px 0 0;background-image: url("../images/musicBG0.jpg");background-size: cover;animation: beginAni 1.5s both;z-index: -1;overflow: hidden;position: relative;
}
.musImg{width: 200px;height: 200px;border: 4px solid #fff;border-radius: 50%;box-shadow: 0 0 30px #fff;animation: imgAniBg 0.5s 1.5s both;position: absolute;top: 20px;left: 50%;margin-left: -100px;
}
.musImg>img{width: 200px;height: 200px;border-radius: 50%;
}
.musName,
.playerNmae{width: 100%;text-align: center;text-shadow: 0 0 8px rgba(255,255,255,255);position: absolute;
}
.musName{font-size: 16px;bottom: 25px;animation: txetAniLeft 0.5s 1.2s both;
}
.playerNmae{font-size: 14px;bottom: 10px;animation: txetAniRight 0.5s 1.4s both;
}
.opc{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #9a6e3a;opacity: 0.3;
}
.jindutiao{width: 600px;height: 5px;background-color: #9c64ab;
}
.jindu{margin: 0;width: 30%;height: 5px;background-color:  #ffd7e8;position: relative;z-index: 1;
}
.jinduyuan{width: 10px;height: 10px;border-radius:  50%;background-color:  #ffd7e8;position: absolute;right: -5px;top: 50%;margin-top: -5px;box-shadow: 0 0 14px #ffd0ea;
}
.jinduyuan:hover{width: 12px;height: 12px;position: absolute;right: -6px;top: 50%;margin-top: -6px;
}
.time{width: 100%;font-size: 10px;position: relative;z-index: 1;
}
.beginTIme{position: absolute;top: 5px;left: 10px;
}
.endTIme{position: absolute;top: 5px;right:10px;
}
.control{bottom: 0;width: 100%;height: 95px;background:linear-gradient(0deg, #7d53c7,#ab93c9);border-radius:0 0 20px 20px;z-index: 0;position: relative;
}
.replay>span{font-size: 18px;
}
.replay{position: absolute;top: 50%;left: 75px;margin-top: -9px;
}
.chagrSp{border-radius: 10px;width: 45px;height: 20px;position: absolute;top: 50%;left: 110px;margin-top: -10px;outline: none;
}
.change{position: absolute;top: 50%;left: 50%;margin: -24.5px 0 0  -110px;width: 220px;height: 49px;display: flex;justify-content: space-between;
}
.cotrBtn{margin: 0;line-height: 45px;text-align: center;width: 45px;height: 45px;border-radius: 50%;border: 2px solid #fff;
}
.cotrBtn>span{font-size: 30px;
}
.cotrVolBtn>span{font-size: 18px;
}
.cotrVolBtn{position: absolute;top: 50%;right: 130px;margin-top: -9px;pointer-events: none;   /* 防止事件穿透子标签 */
}
.volCotr{position: absolute;right: 20px;bottom: 45px;width: 100px;height: 5px;background-color: #7b52c7;border-radius: 5px;
}
.handle{position: relative;width: 100%;height: 5px;background-color: #fff;margin: 0;border-radius: 5px;pointer-events: none;   /* 防止事件穿透子标签 */
}
.yuan{width: 10px;height: 10px;pointer-events: none;   /* 防止事件穿透子标签 */border-radius: 50%;background-color: #fff;position: absolute;right: 0;top: -2.5px;
}
.volV{position: absolute;right: 60px;top: 25px;font-size: 12px;
}
.cotrBtn>span:hover,
.jindutiao:hover,
.volCotr:hover,
.replay>span:hover,
.chagrSp:hover,
.cotrVolBtn>span:hover{cursor: pointer;
}
.yuan:hover{box-shadow: 0 0 12px #bf9fee;
}
.rotate{animation: roteAni 10s linear infinite;
}/* 动画区 */
@keyframes roteAni {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
@keyframes beginAni {0%{opacity: 0;transform: translateY(400px);}50%{opacity: 0.3;transform: translateY(0);}100%{opacity: 1;}
}
@keyframes imgAniBg {0%{opacity: 0;}100%{opacity: 1;}
}
@keyframes txetAniLeft {0%{opacity: 0;transform: translateX(-300px);}100%{opacity: 1;transform: translateX(0);}
}
@keyframes txetAniRight {0%{opacity: 0;transform: translateX(300px);}100%{opacity: 1;transform: translateX(0);}
}

iconfont样式：

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1587133346896'); /* IE9 */src: url('iconfont.eot?t=1587133346896#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWIAAsAAAAAC1gAAAU5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqIIIZTATYCJAMoCxYABCAFhG0HgRkbqglRlE9On+yLBJ5D3dxKZxMJSJ0jNEc0EEhfm1U9H8HXfui+u/scYJcoYBcF1HZ8VIUsCwNkgVRVla/xHR+21f/nc7r3m0yrmZhlQ0SOg8hM5Ac8AW8dk8o2VO0IN/Z/zoYgbITadienjkih3cvafKD0Q3vAGHA94gRy/sH+/vyx1IsozGffzqU6FmWRNB5NhxtQdONENuABTQi3mFfTkyoMyubXQRcT6K1Igh49vH32Zgq2VSBeaYm9Wcqn1HBD66xLDiziFydt+tybwE/783EHiytJlbFLXTy5r3tXl7KvauLTsZwsEIaLYHsYGbtAIf6Uxn4jfG0XoT//BaQXeuZoENIl8Tn48+jPzOeiL0e+nP6q/j9yKcuPxhaHOV58JKhVkmaqf3itTiFq1DYBxHf1jkuZRNRcEoiKy2CrOvto8GjAzoAVzl4EiODqCKLl6jSi41pteC5tvT5gAZgmDkD8wByPbGeWhKD25Ad/xD8wKCgwgdB48FdSKr288gV3d9EKMmyTywt1kgMhJyTYY0SvTnjyZOFjDumrzoq9wfvRI/yQ8ZJrsU3i4MwT4fEkKJYB9vY+JZngpYWXkUvdrA5bRR+O0Yp2wZfn9IJD8mZ5g2TDXmV6rVeBu6giMp1uIos3nMrgazAgF0Hf/fAj8+gT++QLL9h7/PqHD5nHj7knT/grjybCFO1gNGtw+HLmw35THleTzbz7LnuAk8URK99p8yeN1uxyx6V4E5DGk1FiTNmuTYGG7lJHFKo9o8R6OcGM/C5nYqXo0p0b/bTFoh05LWsJG5DYqrydqrnMLp7E8aUlVnxKSiw3WJBgHvwW0ikcV1JqwyfFhDK9GQmWZ6mAWimWouSJ20KOG8M4jdNqJw0Lyt3qCzEoN73qg1zsmJcOpXIF+HKImTcn/8YfojYrM6jcF3wjPyNzSr0AO5hRq7sCFO48JYvKKCcxGcWnV4XRW3t53hHKhh7nmdse5jAOS1aOVxpqtxwvfjnLqt3z3xczv63yV67f3F7Irfzv4nDSOYwq7HK579IFYQR+ToaGks+5WmuULu7tY0w0+pBDP3/tIYaInz/JPUTtP2tLc+h+9393Ygqfub7NU027u9jwMaOPBY9La/znwq2QmIbfLukuvxvs778G76TxMr/7vrSq/a1P4C7/ZOnCbBju8RbTNjlURamwtAXpGU2Je8DHcw5HeMoMmsICxh70jJRwh2PZUjflwlIqRZsFpgUWTb14/VlRAeP5HDGj1xvl14QAyHvpCiD/6ntA/tm3AK212bH0F2MAO3rxNrg/v7mn7YT/rfwNW/DvzMttNDcqMGy9lUDrP9l65LRyMTJ/X04Tk4YfUP3CkA+FR8/n8IlOzXk9tGMR3ZfQWoyQNJYha61iC3EXKoN9qLVOobdj9uGDeU2GonTYtphAmLEHkil/IZtxC1uIr6Cy5BfUZkJA73F4nnCwnsrF9ERYqIaiP6isOAgRLAvX/51k6zAljVb6TSnrIqSlpGabjxQoDbFLcycvW4qAssQeZpHLkXMMDYkNVWVXUUpzpOmysnfaFbPvLTyUEFSQGijyB1SqsEDo+YtF7vvfEanloFQz6ln1G0kyvXyQJkUqAvtoC6hRlzK0WUe61EIrAijb9mUemEUjxPEaAw3l6xmkUuxUdKg0jmg6WxnWtpve4R9t4x9mDPYCfaTIUaKKOppoo4s+Bu1rHZzGIKdVWmkSwyZN1Dj8G0F22aywQG16cTvv0Ogjmy68m6cJ8qRaPGPY1LThzH/cCpyjTQr+W/b2egAA') format('woff2'),url('iconfont.woff?t=1587133346896') format('woff'),url('iconfont.ttf?t=1587133346896') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1587133346896#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-yinliang:before {content: "\e662";
}.icon-jingyin:before {content: "\e61d";
}.icon-replay:before {content: "\e654";
}.icon-play:before {content: "\e80f";
}.icon-shangyishou:before {content: "\e603";
}.icon-xiayishou:before {content: "\e602";
}.icon-zanting_huaban:before {content: "\e637";
}.icon-lunboyoufangun:before {content: "\e7b7";
}.icon-lunbozuofangun:before {content: "\e7be";
}

javaScript:

{// 获取页面idlet music = document.getElementById("music");let image = document.getElementById("image");let play = document.getElementById("play");let prev = document.getElementById("prev");let next = document.getElementById("next");let mName = document.getElementById("mName");let pName = document.getElementById("pName");let eTime = document.getElementById("eTime");let musJD = document.getElementById("musJD");let bTime = document.getElementById("bTime");let musBar = document.getElementById("musBar");let musVol = document.getElementById("musVol");let handle = document.getElementById("handle");let replay = document.getElementById("replay");let chagrSp = document.getElementById("chagrSp");let cotrVolBtn = document.getElementById("cotrVolBtn");let volV = document.getElementById("volV");let tupian = image.parentNode;// console.log(musVol.offsetWidth);// 音乐库let songs = [{name : "Bloom of Youth",singer:"清水準一",mp3:"music/1.mp3",img:"images/1.jpg"},{name : "Refrain",singer:"Anan Ryoko",mp3:"music/2.mp3",img:"images/2.jpg"},{name : "Summer's Here",singer:"Thomas Greenberg",mp3:"music/3.mp3",img:"images/3.jpg"},{name : "Sunny Jim",singer:"Deep East Music",mp3:"music/4.mp3",img:"images/4.jpg"},{name : "いのちの名前",singer:"広橋真紀子",mp3:"music/5.mp3",img:"images/5.jpg"}];// 定义函数let changeMus = function( index ){music.src = songs[index].mp3;image.src = songs[index].img;mName.innerHTML = songs[index].name;pName.innerHTML = songs[index].singer;musJD.style.width = 0;};let setVol = function( event ){let x = event.offsetX;let bfb = x / musVol.offsetWidth * 100;handle.style.width = bfb + "%";music.volume = bfb / 100;volV.innerHTML = Math.floor(bfb)+ "%";// console.log(volV.innerHTML);if( music.volume <= 0 ){music.muted = true;cotrVolBtn.innerHTML = "<span class='iconfont icon-jingyin'></span>";}else {music.muted= false;cotrVolBtn.innerHTML = "<span class='iconfont icon-yinliang'></span>";}};let musicSchl = function( evetn ){let x = event.offsetX;let bfb = x / musBar.offsetWidth * 100;musJD.style.width = bfb + "%";music.currentTime = music.duration * bfb / 100;play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";image.classList.add("rotate");};// 事件集合let index = 0;// 默认第一首changeMus(index);// 给play添加点击事件play.addEventListener("click",function( event ){if( music.paused ){music.play();event.currentTarget.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";// let tupian = image.parentNode;image.classList.add("rotate");// tupian.style.animationDuration = music.duration;}else {music.pause();event.currentTarget.innerHTML = "<span class='iconfont icon-play'></span>";// let tupian = image.parentNode;image.classList.remove("rotate");}});// 切换歌曲prev.addEventListener("click", function ( event ) {index--;if( index <= -1 ){index = songs.length-1;}changeMus( index );play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";image.classList.add("rotate");console.log( index );});next.addEventListener("click", function ( event ) {index++;if( index > songs.length-1 ){index = 0;}changeMus( index );play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";image.classList.add("rotate");console.log( index );});// 歌曲事件// 元素据加载，显示总时长，durationmusic.addEventListener("loadedmetadata",function( event ){let end = music.duration;let m = Math.floor(end/60);let c = Math.floor(end%60);let ct = 0;let cti = 0;// console.log(m,c);if( c < 10 ){ct = "0"+c;eTime.innerHTML = "0"+m+":"+ct;}else if( c >= 10 ){cti = c ;eTime.innerHTML = "0"+m+":"+cti;}});//canplay 切换歌曲是，顺利播放music.addEventListener("canplay",function( event ){music.play();});// 时间更新music.addEventListener("timeupdate",function( event ){let jd = music.currentTime / music.duration;let bfb = jd*100 ;musJD.style.width = bfb + "%";let begin = music.currentTime;let m = Math.floor(begin/60);let c = Math.floor(begin%60);if(c<10){// console.log("0"+m,"0"+c);bTime.innerHTML = "0"+m+":"+0+c;}else if(c>=10){// console.log(m,c);bTime.innerHTML = "0"+m+":"+c;}});// 歌曲进度条musBar.addEventListener("click",function( event ){musicSchl( event );});// 音量控制musVol.addEventListener("click",function(){setVol(event);});musVol.addEventListener("mousedown",function( event ){musVol.addEventListener("mousemove",setVol);});musVol.addEventListener("mouseup",function( event ){musVol.removeEventListener("mousemove",setVol);});//重新播放事件replay.addEventListener("click",function( event ){music.currentTime = 0;play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";image.classList.add("rotate");});// 切换播放速度chagrSp.addEventListener("change",function( event ){music.playbackRate = event.currentTarget.value;});// 静音事件cotrVolBtn.addEventListener("click",function( event ){if( !music.muted ){music.muted = true;event.currentTarget.innerHTML = "<span class='iconfont icon-jingyin'></span>";}else {music.muted= false;event.currentTarget.innerHTML = "<span class='iconfont icon-yinliang'></span>";}})
}

JS事件笔记：音乐播放器相关推荐

在HarmonyOS中实现基于JS卡片的音乐播放器
/ 今日科技快讯 / 近日,苹果首席执行官蒂姆·库克接受<时代>杂志专访,谈及他本人对领导力.企业价值和新技术的看法.库克表示,苹果不仅要引领创新,还要努力让世界变得更安全更公平, ...
Js简单实现音乐播放器
Js简单实现音乐播放器 HTML部分 CSS部分 js代码部分这段时间正好是寒假,闲来无事把大二学的web再温习了一遍,在学习到Js时,想找一些小玩意来练练手,于是我就用原生Js做了一个简单音乐播放 ...
原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）
学了前端小半个月了,今天自己动手写一个音乐播放器实现的功能有播放列表 ,随机单曲循环播放,上下一首,暂停和开始,静音,音量增加减少,进度条(收藏功能暂未实现,为了排版好看添加的,后续补充收藏等功能) ...
js html5 音乐播放器代码大全,js实现简单音乐播放器
本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节完整代码(直接拿来用) audio功能开发 * { marg ...
基于html和Node.js的网页音乐播放器设计
资源下载地址:https://download.csdn.net/download/sheziqiong/86781841 资源下载地址:https://download.csdn.net/downl ...
基于howler.js开发的音乐播放器
2019独角兽企业重金招聘Python工程师标准>>> howler.js 是一个新的 JavaScript 库用于处理 Web 的音频,该库最初是为一个 HTML5 游戏引擎所开发 ...
js简单网页音乐播放器
今天在这里写一个关于web的简单的音乐播放器,运用到了h5.css.JS.JQuery中的知识,话不多说直接上代码一:运用HTML5写出音乐的主页面 <html> <head&g ...
js音乐播放器的实现以及可视化
前言我们尝试用原生js写一个音乐播放器,对音频做一个简单的可视化. 最终的效果如下图: 思路还是比较明显的,第一,我们要拿到音频的什么数据进行可视化,如何获取?第二,如何可视化,第二个问题就比较简单 ...
javascript实现一个自制网页音乐播放器
序接触简书也有一段日子了,这中间的时光还是比较轻松加愉快的,那种可以和他人分享知识的欣喜和愉悦的确是非常棒.我一向都是觉得专心写自己的文就可以了,不会总是纠结有多少人在看,有多少点击等等.用心写好自 ...

JS事件笔记：音乐播放器

JS事件笔记：音乐播放器相关推荐

最新文章

热门文章