UDN-企业互联网技术人气社区

板块导航

浏览  : 867
回复  : 1

[资源] HTML5 audio标签使用js进行播放控制实例

[复制链接]
令狐的头像 楼主
发表于 2015-6-8 14:24:54 | 显示全部楼层 |阅读模式


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

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

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

代码如下:

  1. var audio ;
  2. window.onload = function(){
  3. initAudio();
  4. }
  5. var initAudio = function(){
  6. //audio = document.createElement("audio")
  7. //audio.src='Never Say Good Bye.ogg'
  8. audio = document.getElementById('audio');
  9. }
  10. function getCurrentTime(id){
  11. alert(parseInt(audio.currentTime) + ':秒');
  12. }

  13. function playORPAused(id,obj){
  14. if(audio.paused){
  15. audio.play();
  16. obj.innerHTML='暂停';
  17. return;
  18. }
  19. audio.pause();
  20. obj.innerHTML='播放';
  21. }

  22. function hideOrShowControls(id,obj){
  23. if(audio.controls){
  24. audio.removeAttribute('controls');
  25. obj.innerHTML = '显示控制框'
  26. return;
  27. }
  28. audio.controls = 'controls';
  29. obj.innerHTML = '隐藏控制框'
  30. return;
  31. }
  32. function vol(id,type , obj){
  33. if(type == 'up'){
  34. var volume = audio.volume + 0.1;
  35. if(volume >=1 ){
  36. volume = 1 ;

  37. }
  38. audio.volume = volume;
  39. }else if(type == 'down'){
  40. var volume = audio.volume - 0.1;
  41. if(volume <=0 ){
  42. volume = 0 ;
  43. }
  44. audio.volume = volume;
  45. }
  46. document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
  47. }
  48. function muted(id,obj){
  49. if(audio.muted){
  50. audio.muted = false;
  51. obj.innerHTML = '开启静音';
  52. }else{
  53. audio.muted = true;
  54. obj.innerHTML = '关闭静音';
  55. }
  56. }
  57. //保留一位小数点

  58. function returnFloat1(value) {
  59. value = Math.round(parseFloat(value) * 10) / 10;
  60. if (value.toString().indexOf(".") < 0){
  61. value = value.toString() + ".0";
  62. }
  63. return value;
  64. }
复制代码


调用方式如下:
代码如下:

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


当前音量:
  1. <span id = "nowVol"> - </span>
复制代码

相关帖子

发表于 2015-8-10 16:23:41 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部