mp3 - 副本.html 4.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <!-- Website Design By: www.happyworm.com -->
  6. <title>Demo : jPlayer as an audio player</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <link href="http://www.jplayer.cn/misc/jPlayer.css" rel="stylesheet" type="text/css">
  9. <link href="http://www.jplayer.cn/misc/prettify-jPlayer.css" rel="stylesheet" type="text/css">
  10. <link href="http://www.jplayer.cn/demos/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
  11. <script type="text/javascript" src="http://www.jplayer.cn/demos/lib/jquery.min.js"></script>
  12. <script type="text/javascript" src="http://www.jplayer.cn/demos/dist/jplayer/jquery.jplayer.min.js"></script>
  13. <script type="text/javascript">
  14. $(document).ready(function(){
  15. $("#jquery_jplayer_1").jPlayer({
  16. ready: function (event) {
  17. $(this).jPlayer("setMedia", {
  18. title: "mp3",
  19. m4a: "file:///D:\DelphiProjects\RealICQClient\ZWT\Users\002682BECE10-test04\ReceivedFaces\01053E1868F4BE73A2D321E74E7A9713.mp3",
  20. oga: "http://www.jplayer.cn/demos/audio/ogg/小城大事.ogg"
  21. });
  22. },
  23. swfPath: "../../dist/jplayer", // jquery.jplayer.swf 文件存放的位置
  24. supplied: "oga,m4a",
  25. wmode: "window", // 设置Flash 的wmode,具体设置参见文档说明,写window 就好了
  26. useStateClassSkin: true, // 默认情况下,播放和静音状态下的dom 元素会添加class jp-state-playing, jp-state-muted 这些状态会对应一些皮肤,是否使用这些状态对应的皮肤。
  27. autoBlur: false, // 点击之后自动失去焦点
  28. smoothPlayBar: true, // 平滑过渡
  29. keyEnabled: true, // 是否允许键盘控制播放
  30. remainingDuration: true, // 是否显示剩余播放时间,如果为false 那么duration 那个dom显示的是【3:07】,如果为true 显示的为【-3:07】
  31. toggleDuration: true //允许点击剩余时间的dom 时切换 剩余播放时间的方式,比如从【3:07】点击变成【-3:07】如果设置为false ,那么点击无效,只能显示remainingDuration 设置的方式。
  32. });
  33. });
  34. </script>
  35. </head>
  36. <body>
  37. <div id="container">
  38. <section id="content_main">
  39. <article>
  40. <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  41. <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
  42. <div class="jp-type-single">
  43. <div class="jp-gui jp-interface">
  44. <div class="jp-volume-controls">
  45. <button class="jp-mute" role="button" tabindex="0">mute</button>
  46. <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
  47. <div class="jp-volume-bar">
  48. <div class="jp-volume-bar-value"></div>
  49. </div>
  50. </div>
  51. <div class="jp-controls-holder">
  52. <div class="jp-controls">
  53. <button class="jp-play" role="button" tabindex="0">play</button>
  54. <button class="jp-stop" role="button" tabindex="0">stop</button>
  55. </div>
  56. <div class="jp-progress">
  57. <div class="jp-seek-bar">
  58. <div class="jp-play-bar"></div>
  59. </div>
  60. </div>
  61. <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
  62. <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
  63. <div class="jp-toggles">
  64. <button class="jp-repeat" role="button" tabindex="0">repeat</button>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="jp-details">
  69. <div class="jp-title" aria-label="title">&nbsp;</div>
  70. </div>
  71. <div class="jp-no-solution">
  72. <span>Update Required</span> To play the media you will need to either update your browser to
  73. a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
  74. </div>
  75. </div>
  76. </div>
  77. </article>
  78. </section>
  79. </div>
  80. </body>
  81. </html>