首页 > 开发 > JavaScript > 正文

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

2020-03-24 15:49:16
字体：大 中 小
来源：转载
供稿：网友

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

<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.html' target='_blank'>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
电影下载[www.aikan.tv/xzhtml/dyxz/]() + ".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>

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：JSP结合XML+XSLT将输出转换HTML

下一篇：举例详解HTML5中使用JS、ON格式提交表单

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格式教程...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

陌陌成立文化传播新公司 联合创始人雷小亮任法定代表人
2020-03-25 12:47:38
美团云5月31日起停止对用户服务
2020-03-22 13:00:36
中国移动2019年净利润1066亿元 超出预期
2020-03-19 18:53:05
国内油价重回“5元时代” 92号汽油每升下调0.80元
2020-03-18 19:35:57
腾讯在天津成立新公司 斥资2亿元人民币
2020-03-18 19:32:46
软银集团或放弃收购WeWork 30亿美元收购要约计划告吹
2020-03-18 19:30:20

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2020 VEVB.COM. All Rights Reserved.武林网 版权所有