晨风交流论坛_CMP_CChat_Flash_音乐_视频_播放器_live直播_聊天室

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 169|回复: 1

[程序] 自从flash被禁用了后都用什么听音乐

[复制链接]
发表于 2021-11-28 23:17:46 | 显示全部楼层 |阅读模式
本帖最后由 |。\小三 于 2021-12-15 22:21 编辑

一个简单的HTML音乐播放器:
预览http://w.liupeiqing.com/y/
http://wo0.cc/yy/
http://wo0.cc/yy/y.html

复制代码保存HTML

  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>简单音乐</title>
  7. <style>
  8. li {list-style-type: none;margin: 5px;}
  9. a {text-decoration: none;color: blue;}
  10. #musicTitle {font-size: 30px;}
  11. </style>
  12. <script type="text/javascript" src="http://w.liupeiqing.com/js/y_jquery-1-7-2.js"></script>
  13. <script type="text/javascript">
  14. //音乐资源
  15. var myMusics = new Array(
  16. {src: "http://101.43.119.105/mp3.php?ac=青城山下白素贞",title: "青城山下白素贞-鞠婧祎"},
  17. {src: "http://101.43.119.105/mp3.php?ac=起风了",title: "起风了-周深"},
  18. {src: "http://101.43.119.105/mp3.php?ac=半吨兄弟 - 漠河舞厅",title: "半吨兄弟 - 漠河舞厅"}
  19. );
  20. //数组下标
  21. var index = -1;
  22. //播放状态 单曲循环:0 列表循环:1 随机播放:2
  23. var playState = 1;
  24. //创建音乐列表
  25. function createBox() {
  26. var html = "";
  27. for (var i = 0; i < myMusics.length; i++) {
  28.         html += "<li>" + (i + 1) + "  <a href='javascript:clickName(" + i + ");'>" + myMusics[i].title + "</a></li>"
  29. }
  30. return html
  31. }
  32. //页面加载               
  33. $(document).ready(function() {
  34. $("#" + "box").append(createBox());
  35. playMusic(1);
  36. //按钮"下一首"单击事件
  37. $("#nextMusic").click(function() {
  38.         playMusic(1, 1);
  39. });
  40. //按钮"上一首"单击事件
  41. $("#lastMusic").click(function() {
  42.         playMusic(2);
  43. });
  44. ////按钮"播放/暂停"单击事件
  45. $("#playMusic").click(function() {
  46.         if ($(this).val() == "播放") {
  47.                 $(this).val("暂停");
  48.                 document.getElementById("media").play();
  49.         } else if ($(this).val() == "暂停") {
  50.                 $(this).val("播放");
  51.                 document.getElementById("media").pause();
  52.         }
  53. });
  54. //快进
  55. $("#fast").click(function() {
  56.         var media = document.getElementById("media");
  57.         media.currentTime += 5;
  58. });
  59. //快退
  60. $("#rewind").click(function() {
  61.         var media = document.getElementById("media");
  62.         media.currentTime -= 5;
  63. });
  64. //播放状态
  65. $("#playState").change(function() {
  66.         playState = $(this).val();
  67. });
  68. $("li").mouseover(function() {
  69.         $(this).css("background-color", "#F0F0F0");
  70. });
  71. $("li").mouseout(function() {
  72.         $(this).css("background-color", "#FFFFFF");
  73.         $($("li")[index]).css("background-color", "#F0F0F0");
  74. });
  75. });
  76. //点击名字播放音乐
  77. function clickName(i) {
  78. index = i;
  79. playMusic(0);
  80. }
  81. //音乐播放
  82. function playMusic(s, n) {
  83. $("#playMusic").val("暂停");
  84. if (s == 0) { //点击名字播放音乐

  85. } else if (s == 1) { //下一首
  86.         $("#playMusic").val("暂停");
  87.         if (playState == 0) { //单曲循环
  88.                 if (n == 0) {
  89.                 } else if (n == 1) {
  90. index++;
  91. if (index >= myMusics.length) {
  92. index = 0;
  93. }
  94.                 }
  95.         } else if (playState == 1) { //列表循环
  96.                 index++;
  97.                 if (index >= myMusics.length) {
  98. index = 0;
  99.                 }
  100.         } else if (playState == 2) { //随机播放
  101.                 index = Math.floor(Math.random() * myMusics.length);
  102.         }
  103. } else if (s == 2) { //上一首
  104.         index--;
  105.         if (index < 0) {
  106.                 index = myMusics.length - 1;
  107.         }
  108. }
  109. //修改audio资源路径
  110. $("#media").attr("src", myMusics[index].src);
  111. //音乐播放
  112. $("#media").play;
  113. //显示音乐名称
  114. $("#musicTitle").text(myMusics[index].title);
  115. $("title").text(myMusics[index].title);
  116. //重置li列表背景色
  117. $("#box").children("li").css("background-color", "#FFFFFF");
  118. $("#box").children("li").css("font-weight", "normal");
  119. //修改播放音乐背景色
  120. $($("#box").children("li")[index]).css("background-color", "#F0F0F0");
  121. $($("#box").children("li")[index]).css("font-weight", "bold");

  122. $("#sliding").offset({
  123.         left: 60
  124. });
  125. }
  126. //时间获取
  127. function timeupdate() {
  128. //获取audio元素
  129. var media = document.getElementById("media");
  130. //音乐当前位置
  131. var curr = Math.floor(media.currentTime);
  132. //音乐长度
  133. var dur = Math.floor(media.duration);
  134. $("#totalTime").text("时长:" + formatTime(dur));
  135. $("#currTime").text("当前:" + formatTime(curr));
  136. }
  137. //音乐计时格式
  138. function formatTime(time) {
  139. var h = 0,
  140.         i = 0,
  141.         s = parseInt(time);
  142. if (s > 60) {
  143.         i = parseInt(s / 60);
  144.         s = parseInt(s % 60);
  145.         if (i > 60) {
  146.                 h = parseInt(i / 60);
  147.                 i = parseInt(i % 60);
  148.         }
  149. }
  150. var zero = function(v) {
  151.         return (v >> 0) < 10 ? "0" + v : v;
  152. };
  153. return (zero(h) + ":" + zero(i) + ":" + zero(s));
  154. };
  155. </script>
  156. <!--<script type="text/javascript" src="js/music_list.js"></script>--><!-- 音乐列表 -->
  157. <!--<script type="text/javascript" src="http://w.liupeiqing.com/js/music_c.js"></script>--><!-- 设置 -->
  158. </head>
  159. <body>
  160. <audio id="media" src="" autoplay="autoplay" onended="playMusic(1,0)" ontimeupdate="timeupdate()"></audio>
  161. <div style="float:left;margin-left:3%;width:97%;height:200px;">
  162. <p id="musicTitle"></p>
  163. <p id="currTime">当前:00:00:00</p>
  164. <p id="totalTime">时长:00:00:00</p>
  165. <input id="lastMusic" type="button" value="上一首" />
  166. <input id="rewind" type="button" value="<<" />
  167. <input id="playMusic" type="button" value="暂停" />
  168. <input id="fast" type="button" value=">>" />
  169. <input id="nextMusic" type="button" value="下一首" />
  170. <select id="playState">
  171. <option value="0">单曲循环</option>
  172. <option value="1" selected>列表循环</option>
  173. <option value="2">随机播放</option>
  174. </select>
  175. <ul id="box" style="border:1px solid black;padding:0px;height:600px;width:100%;overflow-y:auto;"></ul>
  176. </div>
  177. </body>
  178. </html>
复制代码


QQ|Archiver|手机版|小黑屋|晨风交流论坛 ( 粤ICP备05008793号 )

GMT+8, 2022-1-21 12:53 , Processed in 0.069568 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表