当前位置：Gxlcms > html代码 > html5音频播放图文实例

html5音频播放图文实例

时间：2021-07-01 10:21:17 帮助过：56人阅读

根据html5实现的简单的音频播放，还是挺好的，可以借鉴，下面上代码了 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
  6. <link rel="shortcut icon" href="img/logo.png">
  7. <title>html5 audio音频播放</title>
  8. <style>
  9. *{ margin: 0; padding:0;}
  10. body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"}
  11. h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }
  12. #audio{ width: 100%;}
  13. #control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}
  14. .color_gray{ background: #e4e4e4}
  15. .hide{ display: none;}
  16. .show{ display: block;}
  17. .play{ background:  #f06060;}
  18. .pause{ background:skyblue}
  19. /*进度条样式*/
  20. .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}
  21. .progressBar p{ position: absolute;}
  22. .progressBar .progressBac{ width: 100%; height: 10px;  left: 0; top:0; background: #e4e4e4;}
  23. .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }
  24. .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px;  background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}
  25. /*时间样式*/
  26. #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
  27. .tiemDetail{ position: absolute; right:10px; top:0;}
  28. #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e;   margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
  29. .shareImg{ position: absolute; left: 100000px;}
  30. </style>
  31. </head>
  32. <body>
  33. <script>
  34. $(function() {
  35. getSong();
  36. })
  37. //获取歌曲链接并插入dom中
  38. function getSong() { 
  39. var audio = document.getElementById("audio");
  40. audio.src = "http://frontman.qiniudn.com/songnotime.mp3";
  41. audio.loop = true; //歌曲循环
  42. playCotrol(); //播放控制函数
  43. }
  44. //点击播放/暂停
  45. function clicks() {
  46. var audio = document.getElementById("audio");
  47. $("#control").click(function() {
  48. if ($("#control").hasClass("play")) {
  49. $("#control").addClass("pause").removeClass("play");
  50. audio.play();//开始播放
  51. dragMove();//并且滚动条开始滑动
  52. $("#control").html("暂停播放");
  53. } else {
  54. $("#control").addClass("play").removeClass("pause");
  55. $("#control").html("点击播放");
  56. audio.pause();
  57. }
  58. })
  59. }
  60. //播放时间
  61. function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
  62. var timePlace = document.getElementById(timePlace);
  63. //分钟
  64. var minute = time / 60;
  65. var minutes = parseInt(minute);
  66. if (minutes < 10) {
  67. minutes = "0" + minutes;
  68. }
  69. //秒
  70. var second = time % 60;
  71. seconds = parseInt(second);
  72. if (seconds < 10) {
  73. seconds = "0" + seconds;
  74. }
  75. var allTime = "" + minutes + "" + ":" + "" + seconds + ""
  76. timePlace.innerHTML = allTime;
  77. }
  78. //播放事件监听
  79. function playCotrol() {
  80. audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
  81. function() {
  82. $("#control").addClass("play").removeClass("color_gray");
  83. $("#control").html("点击播放");
  84. addListenTouch(); //歌曲加载之后才可以拖动进度条
  85. var allTime = audio.duration;
  86. timeChange(allTime, "allTime");
  87. setInterval(function() {
  88. var currentTime = audio.currentTime;
  89. $("#time .currentTime").html(timeChange(currentTime, "currentTime"));
  90. }, 1000);
  91. clicks();
  92. }, false);
  93. audio.addEventListener("pause",
  94. function() { //监听暂停
  95. $("#control").addClass("play").removeClass("pause");
  96. $("#control").html("点击播放");
  97. if (audio.currentTime == audio.duration) {
  98. audio.stop();
  99. audio.currentTime = 0;
  100. }
  101. }, false);
  102. audio.addEventListener("play",
  103. function() { //监听暂停
  104. $("#control").addClass("pause").removeClass("play");
  105. $("#control").html("暂停播放");
  106. dragMove();
  107. }, false);
  108. audio.addEventListener("ended", function() {
  109. alert(0)
  110. }, false)
  111. }
  112. //进度条
  113. 这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
  114.  var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置 
  115. //1拖动监听touch事件
  116. function addListenTouch() {
  117. document.getElementById("drag").addEventListener("touchstart", touchStart, false);
  118. document.getElementById("drag").addEventListener("touchmove", touchMove, false);
  119. document.getElementById("drag").addEventListener("touchend", touchEnd, false);
  120. var drag = document.getElementById("drag");
  121. var speed = document.getElementById("speed");
  122. }
  123. //touchstart,touchmove,touchend事件函数
  124.  function touchStart(e) {  
  125.  
  126. e.preventDefault();
  127.  
  128. var touch = e.touches[0];
  129.  
  130. startX = touch.pageX; 
  131.  }
  132.  function touchMove(e) { //滑动          
  133.  
  134. e.preventDefault();
  135.  
  136. var touch = e.touches[0];
  137.  
  138. x = touch.pageX - startX; //滑动的距离
  139.  
  140. //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式     
  141.  
  142. drag.style.left = aboveX + x + "px"; //  
  143.  
  144. speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
  145.  }
  146.  function touchEnd(e) { //手指离开屏幕
  147.  
  148. e.preventDefault();
  149.  
  150. aboveX = parseInt(drag.style.left);
  151.  
  152. var touch = e.touches[0];
  153.  
  154. var dragPaddingLeft = drag.style.left;
  155.  
  156. var change = dragPaddingLeft.replace("px", "");
  157.  
  158. numDragpaddingLeft = parseInt(change);
  159.  
  160. var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外
  161.  
  162. audio.currentTime = currentTime;
  163.  }
  164. //3拖动的滑动条前进
  165. function dragMove() {
  166. setInterval(function() {
  167. drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";
  168. speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";
  169. }, 500);
  170. }
  171. </script>
  172. <h1>html5 audio 音频播放demo</h1>
  173. <!--audiostart-->
  174. <audio id="audio" src=""  loop="loop" autoplay="autoplay" ></audio>
  175. <!--audio End-->
  176. <!--播放控制按钮start-->
  177. <button id="control" class="">loading</button>
  178. <!--播放控制按钮end-->
  179. <!--时间进度条块儿start-->
  180. <section class="progressBar">
  181. <p class="progressBac"></p>
  182. <p class="speed" id="speed"></p>
  183. <p class="drag" id="drag"></p>
  184. </section>
  185. <!--时间进度条块儿end-->
  186. <!--播放时间start-->
  187. <p id="time"><p class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></p></p>
  188. <!--播放时间end-->
  189. <!--歌曲信息start-->
  190. <p id="songInfo">没时间-Leinov<p class="shareImg"><img src="img/html5audio.jpg" alt=""></p></p>
  191. <!--歌曲信息end-->
  192. <script src="js/zepto.js"></script>
  193. </body>
  194. </html>

2. [图片] audioplay.png

以上就是html5 音频播放图文实例的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！