HTML5 <Audio/>标签Api整理(二)
1.实例2:
相对较完整
Html代码:
- <style>
- #volumeSlider .slider-selection {
- background:#bababa;
- }
- </style>
- <div class="container">
- <p>../content/audio/海阔天空.mp3</p>
- <button class="btn btn-primary" id="playBtn">
- <i class="glyphicon glyphicon-play"></i>
- </button>
- <button class="btn btn-info" id="mutedBtn">
- <i class="glyphicon glyphicon-volume-down"></i>
- </button>
- <div class="form-group">
- <label class="control-label">音量:</label>
- <input class="form-control" id="volume" data-slider-id="volumeSlider"
- data-slider-min="0" data-slider-max="100" data-slider-step="1"
- />
- </div>
- <div class="form-group">
- <label class="control-label">进度:</label>
- <input class="form-control" id="timeBtn" data-slider-id="volumeSlider"
- data-slider-min="0" data-slider-step="0.01" />
- </div>
- </div>
- <audio id="myAudio"></audio>
Js代码:
- var currentFile = '../content/audio/海阔天空.mp3';
- //判断浏览器是否支持audio
- if (!window.HTMLAudioElement) {
- alert('您的浏览器不支持audio标签');
- } else {
- var myAudio = document.getElementById('myAudio');
- myAudio.autoplay = false;
- myAudio.preload = false;
- if (myAudio.src.length <= 0) {
- myAudio.src = currentFile;
- }
- //播放/暂停按钮
- $('#playBtn').click(function () {
- var icon = $(this).find('i');
- if (myAudio.paused) {
- myAudio.play();
- icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
- } else {
- myAudio.pause();
- icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
- }
- });
- //静音按钮
- $('#mutedBtn').click(function () {
- var icon = $(this).find('i');
- icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');
- myAudio.muted = !myAudio.muted;
- });
- //音量按钮
- $('#volume').slider({
- value: myAudio.volume * 100
- }).on('change', function (e) {
- var value = e.value.newValue / 100;
- myAudio.volume = value;
- });
- //播放进度按钮
- $('#timeBtn').slider({
- value: 0,
- tooltip: 'always',
- formatter: function (value) {
- var date = new Date(0, 0, 0, 0, 0, value);
- return '当前时间:' + date.Format('mm:ss');
- }
- }).on('change', function (e) {
- var value = e.value.newValue;
- myAudio.currentTime = value;
- myAudio.play();
- });
- //进入可播放状态
- myAudio.oncanplay = function () {
- console.info('进入可播放状态,音频总长度:' + myAudio.duration);
- $('#timeBtn').slider('setAttribute', 'max', myAudio.duration);
- }
- myAudio.onplay = function () {
- console.info('开始播放:' + myAudio.currentTime);
- }
- myAudio.onpause = function () {
- console.info('暂停播放:' + myAudio.currentTime);
- }
- myAudio.ontimeupdate = function (e) {
- $('#timeBtn').slider('setValue', myAudio.currentTime);
- }
- //此事件和onplay好像一直
- myAudio.onplaying = function () {
- console.info('正在播放:' + myAudio.currentTime);
- }
- //此事件和oncanplay 好像一直
- myAudio.onloadedmetadata = function () {
- console.info('文件加载成功:' + myAudio.duration);
- }
- }
显示结果:
更多事件实例参考:HTML5 Media事件(包含缓存进度显示)
时间格式化处理
- // 对Date的扩展,将 Date 转化为指定格式的String
- // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
- // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
- // 例子:
- // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
- // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
- Date.prototype.Format = function (fmt) { //author: meizz
- var o = {
- "M+": this.getMonth() + 1, //月份
- "d+": this.getDate(), //日
- "h+": this.getHours(), //小时
- "m+": this.getMinutes(), //分
- "s+": this.getSeconds(), //秒
- "q+": Math.floor((this.getMonth() + 3) / 3), //季度
- "S": this.getMilliseconds() //毫秒
- };
- if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
- for (var k in o)
- if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
- return fmt;
- }
HTML5 <Audio/>标签Api整理(二)的更多相关文章
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5 <Audio>标签API整理(一)
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- html5 audio标签切换播放音乐的方法
html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- html5 -----audio标签
在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...
随机推荐
- [BZOJ 3942] [Usaco2015 Feb] Censoring 【KMP】
题目链接:BZOJ - 3942 题目分析 我们发现,删掉一段 T 之后,被删除的部分前面的一段可能和后面的一段连接起来出现新的 T . 所以我们删掉一段 T 之后应该接着被删除的位置之前的继续向后匹 ...
- 【Java】Checked、Unchecked Exception
Checked Exception:需要强制catch的异常, Unchecked Exception:这种异常时无法预料的,即RuntimeException,就是运行时的异常. Exception ...
- Debug和Release之本质区别
转自Debug和Release之本质区别 Debug 和 Release 编译方式的本质区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发 ...
- linux shell中的特殊符号
该内容,均来自此网址(http://www.92csz.com/study/linux/12.htm).在下只是把那些命令的截图给去了. 你在学习linux的过程中,也许你已经接触过某个特殊符号,例如 ...
- I2C总线之(一)---概述
概述: I²C 是Inter-Integrated Circuit的缩写,发音为"eye-squared cee" or "eye-two-cee" , 它是一 ...
- android 自定义命名空间
一.统一的用户界面是可以使得应用程序更友好.要做到用户界面的统一,我们就必须用到风格(style)和主题(theme).自定义一个View的方法步骤如下:1.首先,在values文件夹下定义一个att ...
- guava function and predicate 函数式编程
@Test public void function(){ List<String> list = Lists.newArrayList("1","2&quo ...
- 【HDOJ】1881 毕业bg
01背包. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 1005 ty ...
- Asp.Net MVC4新特性指南(1): 基本介绍
这段时间项目不紧,没啥事,就琢磨着把MVC4了解下.看看有啥新特性,顺便发表个博文记录下.哈哈. MVC4我们就用到了微软的Visual Studio 2012(http://www.microsof ...
- Java GC 专家系列5:Java应用性能优化的原则
本文是GC专家系列中的第五篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种GC ...