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 相关文章推荐
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
详解CSS不受控制的position fixed
May 25 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 数组的指针操作实现代码
2011/02/08 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
jquery简单体验
2007/01/10 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
js 通用订单代码
2013/12/23 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python numpy 反转 reverse示例
2019/12/04 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
科室工作的个人自我评价
2013/10/30 职场文书
社团成立邀请函
2014/01/08 职场文书
材料员岗位职责
2014/03/13 职场文书
保安公司服务承诺书
2014/05/28 职场文书
银行进社区活动总结
2014/07/07 职场文书
2014年团委工作总结
2014/11/13 职场文书
2014年节能工作总结
2014/12/18 职场文书
六一儿童节开幕词
2015/01/29 职场文书
老公出轨后的保证书
2015/05/08 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android
sql server 累计求和实现代码
2022/02/28 SQL Server