<!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. 【Eclipse】eclipse che 协作开发

    http://www.eclipse.org/che/ http://blog.csdn.net/ccfeng2008/article/details/50881024 http://www.osch ...

  2. 通过分析 JDK 源代码研究 TreeMap 红黑树算法实现

    本文转载自http://www.ibm.com/developerworks/cn/java/j-lo-tree/ 目录: TreeSet 和 TreeMap 的关系 TreeMap 的添加节点 Tr ...

  3. VS中计算程序运行时间

    VS中计算程序运行的时间   http://bbs.csdn.net/topics/39068881 有时候在设计程序完了之后需要计算程序运行的时间. 这时候可以使用Windows的库函数 GetIi ...

  4. poj 1789

    http://poj.org/problem?id=1789 这是一道图论的题,个人觉得和那个POJ1258是差不多的,就是多了一步,题目难以读懂 题目的意思:就是给你一群字符串要你找字符串对应的字符 ...

  5. android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法

    android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法 原方法: public static Bitmap getSmallBitmap(Strin ...

  6. sed小知识总结

    1)sed默认是打印出文件中的所有行的,使用 -n 选项可以只打印出 匹配 的行 2)当用到sed不同的编辑命令时,用{},且不同编辑命令之间用分号

  7. Tomcat内存溢出(java.lang.OutOfMemoryError: PermGen space)

    Tomcat启动时报如下错误:     java.lang.OutOfMemoryError: PermGen space 解决办法:     配置相关内存大小.其中按照启动tomcat的不同方式,分 ...

  8. Semaphore（信号量）

    Semaphore msdn介绍: 限制可同时访问某一资源或资源池的线程数. 命名空间: System.Threading 程序集: System(在 System.dll 中) 通俗理解: 1:宾馆 ...

  9. 安装PostgreSQL数据库 ，Database Cluster 失败！

    在安装PG数据库的过程中,会选择安装目录以及数据存放目录和端口,并需要选择Local,如果全部使用默认,并且设置好自己的密码后开始安装,前期进展还比较顺利,到了安装Database Cluster时, ...

  10. 深入浅出JMS（一）——JMS简介

    如果手机只能进行实时通话,没有留言和短信功能会怎么样?一个电话打过来,正好没有来得及接上,那么这个电话要传递的信息肯定就收不到了.为什么不能先将信息存下来,当用户需要查看信息的时候再去获得信息呢?伴随 ...