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

<audio src=”音频的地址”>备用（当浏览器不支持audio时显示的内容）</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，则忽略此特性

 

案例：播放文件的路径，点击按钮

<a class="play" id="audioBtn" style="cursor:pointer;" οnclick="autoPlay()"></a>

<audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>

主要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

<script type="text/javascript">
        function audioAutoPlay() {
            var audio = document.getElementById("bgMusic"),
            play = function () {
                audio.play();
                document.removeEventListener("touchstart", play, false);
            };
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                play();
            }, false);
            document.addEventListener('YixinJSBridgeReady', function () {
                play();
            }, false);
            document.addEventListener("touchstart", play, false);
        }
</script>