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实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
分享php分页的功能模块
2015/06/16 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
Javascript开发包大全整理
2006/12/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
学习python (1)
2006/10/31 Python
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Django Highcharts制作图表
2016/08/27 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
教师研修随笔感言
2014/01/23 职场文书
人力资源总监工作说明
2014/03/03 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
综合测评个人总结
2015/03/03 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers