HTML5 audio标签使用js进行播放控制实例


Posted in HTML / CSS onApril 24, 2015

<audio>标签可以在HTML5浏览器中播放音频文件。

<audio>默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。

这里我们可以使用JS来进行控制,代码如下:

复制代码
代码如下:

var audio ;
window.onload = function(){
initAudio();
}
var initAudio = function(){
//audio = document.createElement("audio")
//audio.src='Never Say Good Bye.ogg'
audio = document.getElementById('audio');
}
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + ':秒');
}

function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML='暂停';
return;
}
audio.pause();
obj.innerHTML='播放';
}

function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML = '显示控制框'
return;
}
audio.controls = 'controls';
obj.innerHTML = '隐藏控制框'
return;
}
function vol(id,type , obj){
if(type == 'up'){
var volume = audio.volume + 0.1;
if(volume >=1 ){
volume = 1 ;

}
audio.volume = volume;
}else if(type == 'down'){
var volume = audio.volume - 0.1;
if(volume <=0 ){
volume = 0 ;
}
audio.volume = volume;
}
document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
}
function muted(id,obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = '开启静音';
}else{
audio.muted = true;
obj.innerHTML = '关闭静音';
}
}
//保留一位小数点

function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}


调用方式如下:

复制代码
代码如下:

<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>
<a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>
<a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>
<a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a>
<input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
<audio src="/images/audio/Never Say Good Bye.ogg" id="audio" controls="controls" ></audio>

当前音量:<span id = "nowVol"> - </span>

HTML / CSS 相关文章推荐
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 #HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 #HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 #HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 #HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 #HTML / CSS
You might like
php Ajax乱码
2008/04/09 PHP
php之Memcache学习笔记
2013/06/17 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
图片自动更新(说明)
2006/10/02 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
Vue 中mixin 的用法详解
2018/04/23 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Python正则表达式介绍
2012/08/06 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python简单文本处理的方法
2015/07/10 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python开启debug模式的方法
2019/06/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
html5 标签
2009/07/16 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
行政管理专业求职信
2014/07/06 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang