1.实例2:

相对较完整

Html代码:

  1. <style>
  2. #volumeSlider .slider-selection {
  3. background:#bababa;
  4. }
  5. </style>
  6. <div class="container">
  7. <p>../content/audio/海阔天空.mp3</p>
  8. <button class="btn btn-primary" id="playBtn">
  9. <i class="glyphicon glyphicon-play"></i>
  10. </button>
  11. <button class="btn btn-info" id="mutedBtn">
  12. <i class="glyphicon glyphicon-volume-down"></i>
  13. </button>
  14. <div class="form-group">
  15. <label class="control-label">音量:</label>
  16. <input class="form-control" id="volume" data-slider-id="volumeSlider"
  17. data-slider-min="0" data-slider-max="100" data-slider-step="1"
  18. />
  19. </div>
  20. <div class="form-group">
  21. <label class="control-label">进度:</label>
  22. <input class="form-control" id="timeBtn" data-slider-id="volumeSlider"
  23. data-slider-min="0" data-slider-step="0.01" />
  24. </div>
  25. </div>
  26. <audio id="myAudio"></audio>

Js代码:

  1. var currentFile = '../content/audio/海阔天空.mp3';
  2. //判断浏览器是否支持audio
  3. if (!window.HTMLAudioElement) {
  4. alert('您的浏览器不支持audio标签');
  5. } else {
  6. var myAudio = document.getElementById('myAudio');
  7. myAudio.autoplay = false;
  8. myAudio.preload = false;
  9. if (myAudio.src.length <= 0) {
  10. myAudio.src = currentFile;
  11. }
  12. //播放/暂停按钮
  13. $('#playBtn').click(function () {
  14. var icon = $(this).find('i');
  15. if (myAudio.paused) {
  16. myAudio.play();
  17. icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
  18. } else {
  19. myAudio.pause();
  20. icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
  21. }
  22. });
  23. //静音按钮
  24. $('#mutedBtn').click(function () {
  25. var icon = $(this).find('i');
  26. icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');
  27. myAudio.muted = !myAudio.muted;
  28. });
  29. //音量按钮
  30. $('#volume').slider({
  31. value: myAudio.volume * 100
  32. }).on('change', function (e) {
  33. var value = e.value.newValue / 100;
  34. myAudio.volume = value;
  35. });
  36. //播放进度按钮
  37. $('#timeBtn').slider({
  38. value: 0,
  39. tooltip: 'always',
  40. formatter: function (value) {
  41. var date = new Date(0, 0, 0, 0, 0, value);
  42. return '当前时间:' + date.Format('mm:ss');
  43. }
  44. }).on('change', function (e) {
  45. var value = e.value.newValue;
  46. myAudio.currentTime = value;
  47. myAudio.play();
  48. });
  49. //进入可播放状态
  50. myAudio.oncanplay = function () {
  51. console.info('进入可播放状态,音频总长度:' + myAudio.duration);
  52. $('#timeBtn').slider('setAttribute', 'max', myAudio.duration);
  53. }
  54. myAudio.onplay = function () {
  55. console.info('开始播放:' + myAudio.currentTime);
  56. }
  57. myAudio.onpause = function () {
  58. console.info('暂停播放:' + myAudio.currentTime);
  59. }
  60. myAudio.ontimeupdate = function (e) {
  61. $('#timeBtn').slider('setValue', myAudio.currentTime);
  62. }
  63. //此事件和onplay好像一直
  64. myAudio.onplaying = function () {
  65. console.info('正在播放:' + myAudio.currentTime);
  66. }
  67. //此事件和oncanplay 好像一直
  68. myAudio.onloadedmetadata = function () {
  69. console.info('文件加载成功:' + myAudio.duration);
  70. }
  71. }

显示结果:

更多:HTML5 <Audio>标签API整理(一)

更多事件实例参考:HTML5 Media事件(包含缓存进度显示)

时间格式化处理

  1. // 对Date的扩展,将 Date 转化为指定格式的String
  2. // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
  3. // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
  4. // 例子:
  5. // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
  6. // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
  7. Date.prototype.Format = function (fmt) { //author: meizz
  8. var o = {
  9. "M+": this.getMonth() + 1, //月份
  10. "d+": this.getDate(), //日
  11. "h+": this.getHours(), //小时
  12. "m+": this.getMinutes(), //分
  13. "s+": this.getSeconds(), //秒
  14. "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  15. "S": this.getMilliseconds() //毫秒
  16. };
  17. if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  18. for (var k in o)
  19. if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  20. return fmt;
  21. }

HTML5 <Audio/>标签Api整理(二)的更多相关文章

  1. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  2. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  3. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  4. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  5. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  6. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  7. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  8. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  9. html5 -----audio标签

    在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...

随机推荐

  1. [BZOJ 3942] [Usaco2015 Feb] Censoring 【KMP】

    题目链接:BZOJ - 3942 题目分析 我们发现,删掉一段 T 之后,被删除的部分前面的一段可能和后面的一段连接起来出现新的 T . 所以我们删掉一段 T 之后应该接着被删除的位置之前的继续向后匹 ...

  2. 【Java】Checked、Unchecked Exception

    Checked Exception:需要强制catch的异常, Unchecked Exception:这种异常时无法预料的,即RuntimeException,就是运行时的异常. Exception ...

  3. Debug和Release之本质区别

    转自Debug和Release之本质区别 Debug 和 Release 编译方式的本质区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发 ...

  4. linux shell中的特殊符号

    该内容,均来自此网址(http://www.92csz.com/study/linux/12.htm).在下只是把那些命令的截图给去了. 你在学习linux的过程中,也许你已经接触过某个特殊符号,例如 ...

  5. I2C总线之(一)---概述

    概述: I²C 是Inter-Integrated Circuit的缩写,发音为"eye-squared cee" or "eye-two-cee" , 它是一 ...

  6. android 自定义命名空间

    一.统一的用户界面是可以使得应用程序更友好.要做到用户界面的统一,我们就必须用到风格(style)和主题(theme).自定义一个View的方法步骤如下:1.首先,在values文件夹下定义一个att ...

  7. guava function and predicate 函数式编程

    @Test public void function(){ List<String> list = Lists.newArrayList("1","2&quo ...

  8. 【HDOJ】1881 毕业bg

    01背包. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 1005 ty ...

  9. Asp.Net MVC4新特性指南(1): 基本介绍

    这段时间项目不紧,没啥事,就琢磨着把MVC4了解下.看看有啥新特性,顺便发表个博文记录下.哈哈. MVC4我们就用到了微软的Visual Studio 2012(http://www.microsof ...

  10. Java GC 专家系列5:Java应用性能优化的原则

    本文是GC专家系列中的第五篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种GC ...