站长资源网络编程
原生JS实现音乐播放器
简介本文实例为大家分享了JS实现音乐播放器的具体代码，供大家参考，具体内容如下首先，使用HTML搭好我们的框架结构。这一步为了提高我们代码的可读性，多写注释。原生JS音</div>
<div class="news_infos"><div id="MyContent"><p>本文实例为大家分享了JS实现音乐播放器的具体代码，供大家参考，具体内容如下</p>
<p><strong>首先</strong>，使用HTML搭好我们的框架结构。这一步为了提高我们代码的可读性，多写注释。</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS音乐播放器</title>
<link rel="stylesheet" href="css/public.css" >
<link rel="stylesheet" href="css/css.css" >
</head>
<body>
<!-- 音乐播放器 -->
<div class="music">
<!-- 歌曲信息 -->
<div class="word">
<div class="clears"></div>
<!-- 歌曲封面 -->
<div class="img">
<img src="/UploadFiles/2021-04-02/1.jpg">
<p><strong>第二步</strong>，搭好框架后，就用<strong>CSS</strong>给他写上你喜欢的样式。<strong>注意</strong>这里我是将样式分为了公共样式和独立样式分开写的，提高代码可重复利用，当然你也可以使用SASS更方便，这里我只提供了独立样式，公共样式可以在网上自主寻找。</p>
<div class="htmlcode">
<pre class="brush:css;">
html {
background: #92b991;
}
.music {
width: 670px;
height: 400px;
background: url("../images/bg.jpg") no-repeat center;
margin-left: auto;
margin-right: auto;
border: 1px #3d5e59 solid;
margin-top: 150px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
position: relative;
}
.img {
width: 200px;
height: 200px;
border: 2px #fff solid;
overflow: hidden;
border-radius: 100%;
margin-top: 50px;
margin-left: 35%;
}
.mtv {
width: 670px;
position: relative;
}
.text {
color: #fff;
margin-right: 30px;
margin-left: 30px;
margin-bottom: 10px;
}
.text>h1 {
font-size: 24px;
line-height: 30px;
font-weight: normal;
}
.text>h2 {
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: 300;
line-height: 1.7;
}
.vol01 {
position: absolute;
height: 30px;
width: 120px;
right: 30px;
top: -8%;
}
.volPro {
width: 100%;
height: 5px;
margin-top: 44.5px;
border: 1px #fff solid;
border-radius: 5px;
}
.volColor {
height: 5px;
width: 100%;
color: #fff;
pointer-events: none;
}
.volBlock {
pointer-events: none;
position: absolute;
top: 42px;
width: 10px;
height: 10px;
border: 1px #fff solid;
background: #f4f3f3;
border-radius: 100%;
left: 100%;
margin-left: -5px;
}
.volTop {
color: #fff;
font-size: 10px;
position: absolute;
top: 25px;
right: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vImg {
position: absolute;
top: 38px;
left: -26px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.time {
font-family: "Microsoft YaHei";
font-size: 10px;
line-height: 1.5;
color: #fff;
margin-top: 25px;
}
.cTime {
float: left;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tTime {
float: right;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.progress {
margin-left: 30px;
margin-right: 30px;
}
.proBar {
width: 100%;
height: 2px;
overflow: hidden;
background: #B292FF;
margin-top: 5px;
border-radius: 5px;
}
.proColor {
height: 7px;
width: 30%;
background: #fff;
pointer-events: none;
}
.ctrls {
text-align: center;
margin-top: 20px;
margin-left: 30px;
margin-right: 30px;
}
.btn {
position: absolute;
top: 50px;
}
.nextPrev {
right: 0;
margin-left: 200px;
opacity: 0.1;
transition: all 0.3s;
}
.nextPrev:hover {
opacity: 0.5;
}
.prevBtn {
left: 0;
opacity: 0.1;
transition: all 0.3s;
}
.prevBtn:hover {
opacity: 0.5;
}
.playBtn {
height: 200px;
width: 200px;
border-radius: 200px;
opacity: 0.3;
position: absolute;
top: 52px;
left: 250px;
margin-left: -14px;
transition: all 0.3s;
}
.playBtn:hover {
opacity: 0.5;
background: #46847b;
}</pre>
</div>
<p><strong>第三步</strong>，也是让音乐播放器具有灵魂的东西，使用JS添加功能。</p>
<p><strong>1.获取ID</strong>（当然这里也可以获取类名或是元素，看你自己的习惯）。</p>
<div class="htmlcode">
<pre class="brush:js;">
let music = document.getElementById("music");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let singer = document.getElementById("singer");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");</pre>
</div>
<p><strong>2.添加音乐播放功能。</strong></p>
<p><strong>导入音乐</strong><br>
</p>
<div class="htmlcode">
<pre class="brush:js;">
let songs = [{
mp3: "music/01.mp3",
singer: "赵薇",
name: "不能和你分手",
img: "images/1.jpg"
}, {
mp3: "music/04.mp3",
singer: "陈粒",
name: "易燃易爆炸",
img: "images/2.jpg"
}, {
mp3: "music/06.mp3",
singer: "胡夏/郁可唯",
name: "知否知否",
img: "images/3.jpg"
}];</pre>
</div>
<p><strong>音乐播放</strong></p>
<div class="htmlcode">
<pre class="brush:js;">
let changeMusic = function(index) {
music.src = songs[index].mp3;
img.src = songs[index].img;
sName.innerHTML = songs[index].name;
singer.innerHTML = songs[index].singer;
proBar.style.width = 0;
};
let index = 0;
changeMusic(index);</pre>
</div>
<p><strong>音乐播放暂停</strong><br>
</p>
<div class="htmlcode">
<pre class="brush:js;">
playBtn.addEventListener("click", function(event) {
if (music.paused) {
music.play();
event.currentTarget.innerHTML = '<img src="/UploadFiles/2021-04-02/暂停.png">
<p><strong>音乐切换</strong></p>
<div class="htmlcode">
<pre class="brush:js;">
prevBtn.addEventListener("click", function(event) { //上一首
index--;
if (index <= -1) {
index = songs.length - 1;
}
changeMusic(index);
});
nextBtn.addEventListener("click", function(event) { //下一首
index++;
if (index > songs.length - 1) {
index = 0;
}
changeMusic(index);
});
music.addEventListener('ended',function () { //自动播放下一首
index++;
if (index > songs.length - 1) {
index = 0;
}
changeMusic(index);
})</pre>
</div>
<p><strong>3.添加进度条。</strong></p>
<div class="htmlcode">
<pre class="brush:js;">
music.addEventListener("loadedmetadata", function(event) { //提示音频的元数据已加载
tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
});
music.addEventListener("timeupdate", function(event) { //监听音乐事实播放事件
let jd = music.currentTime / music.duration;
let bfb = jd * 100 + "%";
proBar.style.width = bfb;
if (music.currentTime < 10) {
cTime.innerHTML = "0:0" + Math.floor(music.currentTime);
} else if (music.currentTime < 60) {
cTime.innerHTML = "0:" + Math.floor(music.currentTime);
} else {
let minet = parseInt(music.currentTime / 60);
let sec = music.currentTime - minet * 60;
if (sec < 10) {
cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
} else {
cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
}
}
});</pre>
</div>
<p><strong>小功能：</strong>点击进度条，音乐也跟着变化跳转到指定的时间。</p>
<div class="htmlcode">
<pre class="brush:js;">
songPro.addEventListener("click", function(event) {
let x = event.offsetX;
let bfb = x / 610 * 100;
proBar.style.width = bfb + "%";
music.currentTime = music.duration * bfb / 100;
});</pre>
</div>
<p><strong>4.添加音量调节模块。</strong></p>
<div class="htmlcode">
<pre class="brush:js;">
let getBfb = function(event) {
let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
let volX = vol.getBoundingClientRect().x; //getBoundingClientRect()获取元素的宽高位置
let disX = x - volX;
disX = Math.max(0, disX); //返回最大数字
disX = Math.min(120, disX); //返回最小数字
return disX / 120;
};
let setVol = function(event) {
let bfb = Math.floor(getBfb(event) * 10000) / 100;
volCol.style.width = bfb + "%";
volB.style.left = bfb + "%";
volText.innerHTML = Math.floor(bfb) + "%";
music.volume = bfb / 100;
};
vol.addEventListener("mousedown", function() {
document.addEventListener("mousemove", setVol);
});
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", setVol);
});</pre>
</div>
<p><strong>全部JS代码</strong></p>
<p>这里我使用了{}作用域，让let 或 const声明的变量只在 let 或 const命令所在的代码块 {} 内有效，在 {} 之外不能访问（ECMAScript 6(简称ES6)中新增的）。</p>
<div class="htmlcode">
<pre class="brush:js;">
{
let music = document.getElementById("music");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let singer = document.getElementById("singer");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");
let songs = [{
mp3: "music/01.mp3",
singer: "赵薇",
name: "不能和你分手",
img: "images/1.jpg"
}, {
mp3: "music/04.mp3",
singer: "陈粒",
name: "易燃易爆炸",
img: "images/2.jpg"
}, {
mp3: "music/06.mp3",
singer: "胡夏/谭维维",
name: "知否知否",
img: "images/3.jpg"
}];
let changeMusic = function(index) {
music.src = songs[index].mp3;
img.src = songs[index].img;
sName.innerHTML = songs[index].name;
singer.innerHTML = songs[index].singer;
proBar.style.width = 0;
};
let index = 0;
changeMusic(index);
playBtn.addEventListener("click", function(event) {
if (music.paused) {
music.play();
event.currentTarget.innerHTML = '<img src="/UploadFiles/2021-04-02/暂停.png">
<p>最终效果展示：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2021126103937684.jpg');"><img src="/UploadFiles/2021-04-02/2021126103937684.jpg" alt="原生JS实现音乐播放器" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.paidiu.com/show/1/77407.html" title="原生js实现九宫格拖拽换位">原生js实现九宫格拖拽换位</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/77409.html" title="通过滑动翻页效果实现和移动端click事件问题">通过滑动翻页效果实现和移动端click事件问题</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619123.html" one-link-mark="yes" title="群星《奔赴！万人现场 第2期》[FLAC/分轨][518.87MB]"><span>群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619122.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[320K/MP3][43.91MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619121.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FLAC/分轨][140.49MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619120.html" one-link-mark="yes" title="【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]"><span>【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619119.html" one-link-mark="yes" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]"><span>贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619118.html" one-link-mark="yes" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]"><span>小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619117.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]"><span>群星《欢迎来到我身边 电影原声专辑》[320K/MP3</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619116.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]"><span>群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619115.html" one-link-mark="yes" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]"><span>雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619114.html" one-link-mark="yes" title="群星《2024好听新歌42》AI调整音效【WAV分轨】"><span>群星《2024好听新歌42》AI调整音效【WAV分轨】</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/show/1/603537.html"><ul>Windows上运行安卓你用过了吗<br><br>在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。</ul></a></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>