• 售前

  • 售后

热门帖子
入门百科

原生JS实现音乐播放器

[复制链接]
我能陪你变老 显示全部楼层 发表于 2021-10-25 19:57:08 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了JS实现音乐播放器的具体代码,供各人参考,具体内容如下
首先,利用HTML搭好我们的框架结构。这一步为了进步我们代码的可读性,多写解释。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>原生JS音乐播放器</title>
  6. <link rel="stylesheet" href="css/public.css" >
  7. <link rel="stylesheet" href="css/css.css" >
  8. </head>
  9. <body>
  10. <!-- 音乐播放器 -->
  11. <div class="music">
  12. <!-- 歌曲信息 -->
  13. <div class="word">
  14. <div class="clears"></div>
  15. <!-- 歌曲封面 -->
  16. <div class="img">
  17. <img src="images/1.jpg" id="img" alt="" /></div>
  18. <!-- 歌曲封面 end -->
  19. </div>
  20. <!-- 歌曲信息 end -->
  21. <!-- 信息和音量 -->
  22. <div class="mtv">
  23. <!-- 文字信息 -->
  24. <div class="text">
  25. <h1 id="sName">歌曲名称</h1>
  26. <h2 id="singer">歌手</h2>
  27. </div>
  28. <!-- 文字信息 end -->
  29. <!-- 音量控制 -->
  30. <div class="vol01">
  31. <div class="volTop" id="volText">
  32. 100%
  33. </div>
  34. <div class="volBottom">
  35. <div class="volPro" id="vol">
  36. <div class="volColor" id="volCol"></div>
  37. <div class="volBlock" id="volB"></div>
  38. </div>
  39. <div class="vImg">
  40. <img src="images/音量.png" alt="" />
  41. </div>
  42. </div>
  43. </div>
  44. <!-- 音量控制 end -->
  45. </div>
  46. <!-- 信息和音量 end -->
  47. <!-- 进度条 -->
  48. <div class="progress">
  49. <span class="cTime time" id="cTime">00:00</span> <!-- 当前时间 -->
  50. <span class="tTime time" id="tTime">00:00</span> <!-- 总的时间 -->
  51. <div class="clears"></div>
  52. <!-- 进度条小 -->
  53. <div class="proBar" id="songPro">
  54. <div class="proColor" id="proBar"></div>
  55. </div>
  56. <!-- 进度条小 end -->
  57. </div>
  58. <!-- 进度条 end -->
  59. <!-- 控制按钮 -->
  60. <div class="ctrls">
  61. <div class="btn">
  62. <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
  63. <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
  64. </div>
  65. <button type="button" class="playBtn" id="playBtn"><img src="images/播放.png" alt="" /></button>
  66. </div>
  67. <!-- 控制按钮 end -->
  68. <audio src="#" id="music"></audio>
  69. </div>
  70. <!-- 音乐播放器 end -->
  71. <script src="js/js.js"></script>
  72. </body>
  73. </html>
复制代码
第二步,搭好框架后,就用CSS给他写上你喜好的样式。留意这里我是将样式分为了公共样式和独立样式分开写的,进步代码可重复利用,当然你也可以利用SASS更方便,这里我只提供了独立样式,公共样式可以在网上自主寻找。
  1. html {
  2. background: #92b991;
  3. }
  4. .music {
  5. width: 670px;
  6. height: 400px;
  7. background: url("../images/bg.jpg") no-repeat center;
  8. margin-left: auto;
  9. margin-right: auto;
  10. border: 1px #3d5e59 solid;
  11. margin-top: 150px;
  12. border-radius: 20px;
  13. box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  14. position: relative;
  15. }
  16. .img {
  17. width: 200px;
  18. height: 200px;
  19. border: 2px #fff solid;
  20. overflow: hidden;
  21. border-radius: 100%;
  22. margin-top: 50px;
  23. margin-left: 35%;
  24. }
  25. .mtv {
  26. width: 670px;
  27. position: relative;
  28. }
  29. .text {
  30. color: #fff;
  31. margin-right: 30px;
  32. margin-left: 30px;
  33. margin-bottom: 10px;
  34. }
  35. .text>h1 {
  36. font-size: 24px;
  37. line-height: 30px;
  38. font-weight: normal;
  39. }
  40. .text>h2 {
  41. font-family: "Microsoft YaHei";
  42. font-size: 14px;
  43. font-weight: 300;
  44. line-height: 1.7;
  45. }
  46. .vol01 {
  47. position: absolute;
  48. height: 30px;
  49. width: 120px;
  50. right: 30px;
  51. top: -8%;
  52. }
  53. .volPro {
  54. width: 100%;
  55. height: 5px;
  56. margin-top: 44.5px;
  57. border: 1px #fff solid;
  58. border-radius: 5px;
  59. }
  60. .volColor {
  61. height: 5px;
  62. width: 100%;
  63. color: #fff;
  64. pointer-events: none;
  65. }
  66. .volBlock {
  67. pointer-events: none;
  68. position: absolute;
  69. top: 42px;
  70. width: 10px;
  71. height: 10px;
  72. border: 1px #fff solid;
  73. background: #f4f3f3;
  74. border-radius: 100%;
  75. left: 100%;
  76. margin-left: -5px;
  77. }
  78. .volTop {
  79. color: #fff;
  80. font-size: 10px;
  81. position: absolute;
  82. top: 25px;
  83. right: 0;
  84. -webkit-touch-callout: none;
  85. -webkit-user-select: none;
  86. -khtml-user-select: none;
  87. -moz-user-select: none;
  88. -ms-user-select: none;
  89. user-select: none;
  90. }
  91. .vImg {
  92. position: absolute;
  93. top: 38px;
  94. left: -26px;
  95. -webkit-touch-callout: none;
  96. -webkit-user-select: none;
  97. -khtml-user-select: none;
  98. -moz-user-select: none;
  99. -ms-user-select: none;
  100. user-select: none;
  101. }
  102. .time {
  103. font-family: "Microsoft YaHei";
  104. font-size: 10px;
  105. line-height: 1.5;
  106. color: #fff;
  107. margin-top: 25px;
  108. }
  109. .cTime {
  110. float: left;
  111. -webkit-touch-callout: none;
  112. -webkit-user-select: none;
  113. -khtml-user-select: none;
  114. -moz-user-select: none;
  115. -ms-user-select: none;
  116. user-select: none;
  117. }
  118. .tTime {
  119. float: right;
  120. -webkit-touch-callout: none;
  121. -webkit-user-select: none;
  122. -khtml-user-select: none;
  123. -moz-user-select: none;
  124. -ms-user-select: none;
  125. user-select: none;
  126. }
  127. .progress {
  128. margin-left: 30px;
  129. margin-right: 30px;
  130. }
  131. .proBar {
  132. width: 100%;
  133. height: 2px;
  134. overflow: hidden;
  135. background: #B292FF;
  136. margin-top: 5px;
  137. border-radius: 5px;
  138. }
  139. .proColor {
  140. height: 7px;
  141. width: 30%;
  142. background: #fff;
  143. pointer-events: none;
  144. }
  145. .ctrls {
  146. text-align: center;
  147. margin-top: 20px;
  148. margin-left: 30px;
  149. margin-right: 30px;
  150. }
  151. .btn {
  152. position: absolute;
  153. top: 50px;
  154. }
  155. .nextPrev {
  156. right: 0;
  157. margin-left: 200px;
  158. opacity: 0.1;
  159. transition: all 0.3s;
  160. }
  161. .nextPrev:hover {
  162. opacity: 0.5;
  163. }
  164. .prevBtn {
  165. left: 0;
  166. opacity: 0.1;
  167. transition: all 0.3s;
  168. }
  169. .prevBtn:hover {
  170. opacity: 0.5;
  171. }
  172. .playBtn {
  173. height: 200px;
  174. width: 200px;
  175. border-radius: 200px;
  176. opacity: 0.3;
  177. position: absolute;
  178. top: 52px;
  179. left: 250px;
  180. margin-left: -14px;
  181. transition: all 0.3s;
  182. }
  183. .playBtn:hover {
  184. opacity: 0.5;
  185. background: #46847b;
  186. }
复制代码
第三步,也是让音乐播放用具有灵魂的东西,利用JS添加功能。
1.获取ID(当然这里也可以获取类名或是元素,看你自己的风俗)。
  1. let music = document.getElementById("music");
  2. let playBtn = document.getElementById("playBtn");
  3. let prevBtn = document.getElementById("prevBtn");
  4. let nextBtn = document.getElementById("nextBtn");
  5. let img = document.getElementById("img");
  6. let sName = document.getElementById("sName");
  7. let singer = document.getElementById("singer");
  8. let tTime = document.getElementById("tTime");
  9. let proBar = document.getElementById("proBar");
  10. let cTime = document.getElementById("cTime");
  11. let songPro = document.getElementById("songPro");
  12. let vol = document.getElementById("vol");
  13. let volCol = document.getElementById("volCol");
  14. let volB = document.getElementById("volB");
  15. let volText = document.getElementById("volText");
复制代码
2.添加音乐播放功能。
导入音乐
  1. let songs = [{
  2. mp3: "music/01.mp3",
  3. singer: "赵薇",
  4. name: "不能和你分手",
  5. img: "images/1.jpg"
  6. }, {
  7. mp3: "music/04.mp3",
  8. singer: "陈粒",
  9. name: "易燃易爆炸",
  10. img: "images/2.jpg"
  11. }, {
  12. mp3: "music/06.mp3",
  13. singer: "胡夏/郁可唯",
  14. name: "知否知否",
  15. img: "images/3.jpg"
  16. }];
复制代码
音乐播放
  1. let changeMusic = function(index) {
  2. music.src = songs[index].mp3;
  3. img.src = songs[index].img;
  4. sName.innerHTML = songs[index].name;
  5. singer.innerHTML = songs[index].singer;
  6. proBar.style.width = 0;
  7. };
  8. let index = 0;
  9. changeMusic(index);
复制代码
音乐播放停息
  1. playBtn.addEventListener("click", function(event) {
  2. if (music.paused) {
  3. music.play();
  4. event.currentTarget.innerHTML = '<img src="images/暂停.png" alt=""/>';
  5. } else {
  6. music.pause();
  7. event.currentTarget.innerHTML = '<img src="images/播放.png" alt=""/>';
  8. }
  9. });
复制代码
音乐切换
  1. prevBtn.addEventListener("click", function(event) { //上一首
  2. index--;
  3. if (index <= -1) {
  4. index = songs.length - 1;
  5. }
  6. changeMusic(index);
  7. });
  8. nextBtn.addEventListener("click", function(event) { //下一首
  9. index++;
  10. if (index > songs.length - 1) {
  11. index = 0;
  12. }
  13. changeMusic(index);
  14. });
  15. music.addEventListener('ended',function () { //自动播放下一首
  16. index++;
  17. if (index > songs.length - 1) {
  18. index = 0;
  19. }
  20. changeMusic(index);
  21. })
复制代码
3.添加进度条。
  1. music.addEventListener("loadedmetadata", function(event) { //提示音频的元数据已加载
  2. tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
  3. });
  4. music.addEventListener("timeupdate", function(event) { //监听音乐事实播放事件
  5. let jd = music.currentTime / music.duration;
  6. let bfb = jd * 100 + "%";
  7. proBar.style.width = bfb;
  8. if (music.currentTime < 10) {
  9. cTime.innerHTML = "0:0" + Math.floor(music.currentTime);
  10. } else if (music.currentTime < 60) {
  11. cTime.innerHTML = "0:" + Math.floor(music.currentTime);
  12. } else {
  13. let minet = parseInt(music.currentTime / 60);
  14. let sec = music.currentTime - minet * 60;
  15. if (sec < 10) {
  16. cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
  17. } else {
  18. cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
  19. }
  20. }
  21. });
复制代码
小功能:点击进度条,音乐也跟着变化跳转到指定的时间。
  1. songPro.addEventListener("click", function(event) {
  2. let x = event.offsetX;
  3. let bfb = x / 610 * 100;
  4. proBar.style.width = bfb + "%";
  5. music.currentTime = music.duration * bfb / 100;
  6. });
复制代码
4.添加音量调节模块。
  1. let getBfb = function(event) {
  2. let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
  3. let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()获取元素的宽高位置
  4. let disX = x - volX;
  5. disX = Math.max(0, disX); //返回最大数字
  6. disX = Math.min(120, disX); //返回最小数字
  7. return disX / 120;
  8. };
  9. let setVol = function(event) {
  10. let bfb = Math.floor(getBfb(event) * 10000) / 100;
  11. volCol.style.width = bfb + "%";
  12. volB.style.left = bfb + "%";
  13. volText.innerHTML = Math.floor(bfb) + "%";
  14. music.volume = bfb / 100;
  15. };
  16. vol.addEventListener("mousedown", function() {
  17. document.addEventListener("mousemove", setVol);
  18. });
  19. document.addEventListener("mouseup", function() {
  20. document.removeEventListener("mousemove", setVol);
  21. });
复制代码
全部JS代码
这里我利用了{}作用域,让let 或 const声明的变量只在 let 或 const下令所在的代码块 {} 内有用,在 {} 之外不能访问(ECMAScript 6(简称ES6)中新增的)。
  1. { 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) {
  2. music.src = songs[index].mp3;
  3. img.src = songs[index].img;
  4. sName.innerHTML = songs[index].name;
  5. singer.innerHTML = songs[index].singer;
  6. proBar.style.width = 0;
  7. };
  8. let index = 0;
  9. changeMusic(index); playBtn.addEventListener("click", function(event) {
  10. if (music.paused) {
  11. music.play();
  12. event.currentTarget.innerHTML = '<img src="images/暂停.png" alt=""/>';
  13. } else {
  14. music.pause();
  15. event.currentTarget.innerHTML = '<img src="images/播放.png" alt=""/>';
  16. }
  17. }); prevBtn.addEventListener("click", function(event) { //上一首
  18. index--;
  19. if (index <= -1) {
  20. index = songs.length - 1;
  21. }
  22. changeMusic(index);
  23. });
  24. nextBtn.addEventListener("click", function(event) { //下一首
  25. index++;
  26. if (index > songs.length - 1) {
  27. index = 0;
  28. }
  29. changeMusic(index);
  30. });
  31. music.addEventListener('ended',function () { //自动播放下一首
  32. index++;
  33. if (index > songs.length - 1) {
  34. index = 0;
  35. }
  36. changeMusic(index);
  37. }) 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; //music.duration总时长 music.currentTime 当前时长 let bfb = jd * 100 + "%"; proBar.style.width = bfb; if (music.currentTime < 10) { cTime.innerHTML = "0:0" + Math.floor(music.currentTime); //Math.floor()向下取整 } else if (music.currentTime < 60) { cTime.innerHTML = "0:" + Math.floor(music.currentTime); } else { let minet = parseInt(music.currentTime / 60); //parseInt()解析一个字符串,并返回一个整数 let sec = music.currentTime - minet * 60; if (sec < 10) { cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec); } else { cTime.innerHTML = "0" + minet + ":" + parseInt(sec); } } }); songPro.addEventListener("click", function(event) {
  38. let x = event.offsetX;
  39. let bfb = x / 610 * 100;
  40. proBar.style.width = bfb + "%";
  41. music.currentTime = music.duration * bfb / 100;
  42. }); let getBfb = function(event) {
  43. let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
  44. let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()获取元素的宽高位置
  45. let disX = x - volX;
  46. disX = Math.max(0, disX); //返回最大数字
  47. disX = Math.min(120, disX); //返回最小数字
  48. return disX / 120;
  49. };
  50. let setVol = function(event) {
  51. let bfb = Math.floor(getBfb(event) * 10000) / 100;
  52. volCol.style.width = bfb + "%";
  53. volB.style.left = bfb + "%";
  54. volText.innerHTML = Math.floor(bfb) + "%";
  55. music.volume = bfb / 100;
  56. };
  57. vol.addEventListener("mousedown", function() {
  58. document.addEventListener("mousemove", setVol);
  59. });
  60. document.addEventListener("mouseup", function() {
  61. document.removeEventListener("mousemove", setVol);
  62. });}
复制代码
最闭幕果展示:

以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作