服务器之家

服务器之家 > 正文

js+audio实现音乐播放器

时间:2021-09-27 12:17     来源/作者:暗锁读客

本文实例为大家分享了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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部