<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Audio Player。兼容ie9及以上</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta name="viewport" content="width=device-width,initial-scale=1" />  
  <link rel="stylesheet" href="css/audioplayer.css" />
  <script src="js/jquery.js"></script>
  <script src="js/audioplayer.js"></script>
         <!--隐藏音乐控件-->
  <style>
    .audioPlayer1{display:none;}
  </style> 
     <script>
    $(function(){
    //暂停播放 
    $("#stop").click(function(){
    $("audio")[0].pause();
    });
    //播放
    $("#start").click(function(){
      $("audio")[0].play();  
    });
      //播放时长
   $("#duration").click(function(){
     alert($("audio")[0].duration)
   });
       
    });
 
 
  </script>
  
 </head>
 <body> 
 
     <input type="button" id="start"  value="播放"/>
  <input type="button" id="stop"  value="暂停"/>
     <input type="button" id="duration" value="播放时长">
       <!--使用时，音乐控件放置至于画面底部-->
          <div class="audioPlayer1">
   <!-- 文档加载后，自动循环播放。兼容ie9及以上-->  
      <audio src="audio/1.mp3" preload="auto" controls  autoplay loop  ></audio>      
    <div>
 </body>
</html>

jquery audio player的更多相关文章

  1. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...

  2. Wordpress 音频播放器 Wordpress audio player with jQuery audioplayer.swf

    原文地址:http://justcoding.iteye.com/blog/545978 Wordpress audio player with jQuery How to use Wordpress ...

  3. jQuery Danmmu Player 弹幕视频

    Danmmu Player是基于jQuery的弹幕视频插件.当在看视频的时候,同时发表自己的观点,这样很好的提高用户互动效果.其实也就是在视频界面上做一个滚动展示动画效果,这样的聊天互动视频效果我们叫 ...

  4. 跨平台音乐播放器qmmp（Cross-Platform Audio Player Qmmp）

    开源多媒体播放器(Audio-Player),简洁的界面,最看重它的是跨平台的特性. 开源 跨平台(Linux.Windows) 简洁 支持音乐格式(mp3/ogg......) 全局快捷键 播放中打 ...

  5. 20 Free Open Source Web Media Player Apps

    free Media Players (Free MP3, Video, and Music Player ...) are cool because they let web developers ...

  6. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  7. HTML5 Audio and JavaScript Control

    IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...

  8. AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  9. 2015年4月 15款免费jQuery插件

    点这里 We have collected for you the 15 fresh, free and handy jQuery plugins that will help to speed up ...

随机推荐

  1. 深入理解学习Git工作流

    http://blog.csdn.net/hongchangfirst/article/list/3 //可以看看 http://blog.csdn.net/hongchangfirst/articl ...

  2. 【leetcode】Minimum Path Sum

    Minimum Path Sum Given a m x n grid filled with non-negative numbers, find a path from top left to b ...

  3. effective OC2.0 52阅读笔记（四 协议与分类）

    23 通过委托与数据源协议进行对象间通信 总结:委托模式的常规委托模式中,信息从类Class流向受委托者delegate.数据源模式,信息从数据源datasource流向class.数据源和受委托者可 ...

  4. 将项目导入eclipse中出现的jsp页面报错解决

  5. ListView异步加载图片，完美实现图文混排

    昨天参加一个面试,面试官让当场写一个类似于新闻列表的页面,文本数据和图片都从网络上获取,想起我还没写过ListView异步加载图片并实现图文混排效果的文章,so,今天就来写一下,介绍一下经验. Lis ...

  6. EF-实体更新

    1.数据库表增加字段,EF更新视图后,对应的实体对象没有新增的字段原因:edmx文件右键属性设置了 保存时转换相关的文本模板-false...正确的应该是rue 2. 更改视图后(或者更改字段类型?) ...

  7. 【python】getopt使用

    来源:http://blog.chinaunix.net/uid-21566578-id-438233.html 注意对比:[python]argparse模块 作者:limodou版权所有limod ...

  8. apache vhost

    httpd.conf: Include "F:/wamp/alias/*" <Directory "F:\wamp\www">    Options ...

  9. [Android Pro] Android性能优化典范第一季

    reference to : http://www.cnblogs.com/hanyonglu/p/4244035.html#undefined 2015年伊始,Google发布了关于Android性 ...

  10. 关于each

    1种 通过each遍历li 可以获得所有li的内容 <!-- 1种 --> <ul class="one"> <li>11a</li> ...