HTML5页面播放音乐及audio功能使用

控制函数功能说明

  • load()   加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
  • play()    加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
  • pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有:

只读属性属性说明

  • duration   获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
  • paused     如果媒体文件被暂停,则返回true,否则返回false
  • ended       如果媒体文件播放完毕,则返回true
  • startTime  返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
  • error          在发生了错误后返回的错误代码
  • currentSrc  以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

 

audio 可脚本控制的特性值:

  • autoplay       自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
  • loop              将媒体文件设置为循环播放,或查询是否已设置为loop
  • currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
  • controls        显示或者隐藏用户控制界面
  • volume         在0.0到1.0间设置音量值,或查询当前音量值
  • muted           设置是否静音
  • autobuffer     媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性

 

案例:播放文件的路径,点击按钮

主要css文件

.pause {
            height: 50px;
            background: url(images/musicbtn.png) no-repeat;
            display: block;
            background-position: 0 bottom;
        }
 
        .play {
            height: 50px;
            background: url(images/musicbtn.png) no-repeat;
            display: block;
        }

主要js文件

function autoPlay() {
            var myAuto = document.getElementById('bgMusic');
            var btn = document.getElementById('audioBtn');
            if (myAuto.paused) {
                myAuto.play();
                btn.classList.remove("pause");
                btn.classList.add("play");
            } else {
                myAuto.pause();
 
                btn.classList.remove("play");
                btn.classList.add("pause");
            }
 
        }

兼容IOS


 

 

你可能感兴趣的:(HTML5页面播放音乐及audio功能使用)