服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js+audio实现音乐播放器

js+audio实现音乐播放器

2021-09-27 12:17暗锁读客 JavaScript

这篇文章主要为大家详细介绍了js+audio实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js+audio实现音乐播放器的具体代码，供大家参考，具体内容如下

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>音乐播放器</title>
  7. <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
  8. <link rel="stylesheet" type="text/css" href="css/music_Play.css" />
  9. </head>
  10.  
  11. <body>
  12. <div class="music_bg">
  13. <div class="music_cont">
  14. <audio id="audio1" src=""></audio>
  15. <div class="music_ctrl">
  16. <div class="music_btn">
  17. <div class="btn prev">
  18. <img id="prev" src="img/prev.png" />
  19. </div>
  20. <div class="btn play">
  21. <img id="play" src="img/pause.png" />
  22. </div>
  23. <div class="btn next">
  24. <img id="next" src="img/next.png" />
  25. </div>
  26. </div>
  27. <div class="music_name" id="music_name"></div>
  28. </div>
  29. <div class="music_line">
  30. <div class="line1" id="line1"></div>
  31. <div class="line2" id="line2"></div>
  32. </div>
  33. </div>
  34. </div>
  35. </body>
  36. <script src="js/audio_play.js" type="text/javascript" charset="utf-8"></script>
  37. </html>
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. -moz-user-select: none;
  5. -webkit-user-select: none;
  6. -ms-user-select: none;
  7. }
  8.  
  9. body {
  10. overflow-x: hidden;
  11. }
  12.  
  13. .music_bg {
  14. width: 100%;
  15. height: 666px;
  16. position: absolute;
  17. background-image: url(../img/bj.jpg);
  18. background-position: center;
  19. background-size: cover;
  20. background-repeat: no-repeat;
  21. }
  22.  
  23. .music_cont {
  24. width: 300px;
  25. height: 300px;
  26. position: absolute;
  27. top: 50%;
  28. left: 50%;
  29. margin: -150px 0 0 -150px;
  30. background-color: #000;
  31. border-radius: 10px;
  32. box-shadow: #000000 5px 5px 30px 5px
  33. }
  34.  
  35. .music_line {
  36. width: 300px;
  37. height: 20px;
  38. overflow: hidden;
  39. position: absolute;
  40. top: 30%;
  41. }
  42.  
  43. .line1 {
  44. width: 0%;
  45. height: 60%;
  46. float: left;
  47. margin-top: 1%;
  48. margin-right: -2px;
  49. background-color: rgba(255, 255, 255, 0.9);
  50. }
  51.  
  52. .line2 {
  53. background-image: url(../img/point.png);
  54. height: 100%;
  55. background-repeat: no-repeat;
  56. width: 10px;
  57. background-position: center;
  58. float: left;
  59. cursor: pointer;
  60. margin-left: -4px;
  61. margin-right: -4px;
  62. }
  63.  
  64. .music_ctrl {
  65. width: 300px;
  66. height: 200px;
  67. position: absolute;
  68. bottom: 0;
  69. background-color: #8c3232;
  70. }
  71.  
  72. .music_btn {
  73. width: 300px;
  74. height: 100px;
  75. position: relative;
  76. }
  77.  
  78. .btn {
  79. width: 33.33%;
  80. float: left;
  81. height: 40px;
  82. margin-top: 50px;
  83. }
  84.  
  85. .prev img {
  86. float: right;
  87. margin: 10px 0px;
  88. cursor: pointer;
  89. }
  90.  
  91. .play img {
  92. margin: 2px 35px;
  93. cursor: pointer;
  94. }
  95.  
  96. .next img {
  97. float: left;
  98. margin: 10px 0px;
  99. cursor: pointer;
  100. }
  101.  
  102. .music_name {
  103. width: 300px;
  104. height: 100px;
  105. position: relative;
  106. text-align: center;
  107. line-height: 100px;
  108. color: #fff;
  109. font-size: 18px;
  110. }
  1. // 定义索引和定时器
  2. var index = 0,
  3. timer = null;
  4. // 获取到要操作的对象
  5. var prev = document.getElementById("prev");
  6. var play = document.getElementById("play");
  7. var next = document.getElementById("next");
  8. var audio1 = document.getElementById("audio1");
  9. var music_name = document.getElementById("music_name");
  10. var line1 = document.getElementById("line1");
  11. var line2 = document.getElementById("line2");
  12. // 定义数组存音频相关资料
  13. var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];
  14. var music_title = ["白举纲-绅士（live）", "魔鬼中的天使", "下个路口见", "大鱼"];
  15. // 进行初始化音频
  16. audio1.src = "audio/" + music_src[index];
  17. music_name.innerText = music_title[index];
  18. // 按钮是点击事件
  19. play.onclick = function() {
  20. move1(); // 播放或暂停
  21. };
  22. prev.onclick = function() {
  23. prev1(); // 上一曲，播放
  24. move1();
  25. }
  26. next.onclick = function() {
  27. next1(); // 下一曲，播放
  28. move1();
  29. }
  30.  
  31. // 下一曲的函数
  32. var next1 = function() { // 索引+1，初始化改变后的音乐播放界面
  33. if (index == music_src.length - 1) {
  34. index = 0;
  35. } else {
  36. index++;
  37. }
  38. audio1.src = "audio/" + music_src[index];
  39. music_name.innerText = music_title[index];
  40. }
  41. // 上一曲的函数
  42. var prev1 = function() { // 索引-1，初始化改变后的音乐播放界面
  43. if (index == 0) {
  44. index = music_src.length - 1;
  45. } else {
  46. index--;
  47. }
  48. audio1.src = "audio/" + music_src[index];
  49. music_name.innerText = music_title[index];
  50. }
  51. // 暂停与播放的函数
  52. var move1 = function() {
  53. // 判断现在是不是在播放
  54. if (audio1.paused) { // 没有，播放音乐，改变按钮样式，改变进度条
  55. audio1.play();
  56. play.src = "img/play.png";
  57. timer = setInterval(function() { // 每500毫秒执行一次
  58. var drtTime = audio1.duration; // 得到音频总时间（如果不放在定时器中会出现下一曲，暂停播放，进度条来回跳动）
  59. var curTime = audio1.currentTime; // 获取音频当前播放时间
  60. line1.style.width = (curTime / drtTime) * 100 + "%"; // 计算出进度条的长度
  61. if (drtTime==curTime) {
  62. next.onclick();
  63. }
  64. console.log(drtTime,curTime);
  65. }, 500);
  66. } else { // 播放，关闭音乐，关闭按钮图标
  67. audio1.pause();
  68. play.src = "img/pause.png";
  69. clearInterval(timer);
  70. }
  71. }
  72. // 拖动进度条改变播放进度
  73. var flag = false; // 标记
  74. var mx = null; // 距离
  75. line2.onmousedown = function(event) {
  76. // 改变状态
  77. flag = true;
  78. // 按下鼠标获取距离
  79. mx = event.pageX - line2.offsetLeft;
  80. clearInterval(timer);
  81. }
  82. document.body.onmousemove = function(event) {
  83. // 当状态为true时可以获取
  84. if (flag) {
  85. // 滑块的位置=当前鼠标位置-距离
  86. var x1 = event.pageX - mx;
  87. // 进度条当前长度=滑块位置-进度条的开始坐标值
  88. var x2 = x1 - line1.offsetLeft;
  89. // 用进度条当前长度/进度条总长度得到一个小数
  90. var x3 = x2 / 295;
  91. // 取到小数点后3位
  92. var x4 = x3.toFixed(3);
  93. if (x4 >= 0 && x4 < 1) {
  94. // 当百分比在0--1之间时才改变进度条长度
  95. line1.style.width = x4 * 100 + "%";
  96. }else if (x4 == 1) {
  97. next.onclick();
  98. }
  99. }
  100. }
  101. // 放开鼠标时，状态改变，当前播放时间改变，启动定时器继续工作
  102. document.body.onmouseup = function(event) {
  103. flag = false; // 状态改变
  104. var x5 = parseInt(line1.style.width) / 100; // 得到当前进度条的百分比
  105. var drtTime = audio1.duration; // 得到音频总时间
  106. audio1.currentTime = (drtTime * x5).toFixed(0); // 改变当前播放时间
  107. timer = setInterval(function() { // 定时器重启成功
  108. var curTime = audio1.currentTime;
  109. line1.style.width = (curTime / drtTime) * 100 + "%";
  110. }, 500);
  111. }

相关图片

js+audio实现音乐播放器

js+audio实现音乐播放器
js+audio实现音乐播放器
js+audio实现音乐播放器
js+audio实现音乐播放器
js+audio实现音乐播放器

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/m0_46690660/article/details/108476475

  • JS
  • 音乐播放器
  • audio

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    格斗 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图