跨浏览器实现音频

作者: Chansl | 来源:发表于2017-03-10 18:35 被阅读0次

跨浏览器实现音频
#hello，JS：15 同源策略 & 跨域(JSONP)
第31章跨域
JavaScript 经典实例收集整理
跨域JSONP实质与JavaScript实现
教你纯前端实现自聊自嗨聊天室
本地调试报跨域请求的问题
文本溢出显示省略号
微信浏览器中音频自动播放
初识javascript

<html>

<head>
    <meta charset="utf-8">
    <title>跨浏览器实现音频</title>

</head>

<body>
    <audio id="main_audio" preload="auto" loop="loop" volume="1.0" style="position: absolute; z-index: 20000" autoplay="true">
            <source src="http://tyl.yy.com/s/qxz/img/bgm.mp3" type="audio/mpeg">
            <object id="main_audio_ie8" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none"> 
                <param name="URL" value="http://tyl.yy.com/s/xcyz/img/bgm.mp3">
                <param name="uiMode" value="invisible"> 
                <param name="autoStart" value="true">
                <param name="volume" value="100">
                <param name="playCount" value="2147483647"> 
            </object> 
        </audio>
    <div id="controls" class="controls music on-off-music">
        <span></span>关闭音乐
    </div>
    <script>
        var isPlaying, audio = document.getElementById('main_audio');
        if (audio.play instanceof Function) isPlaying = function(audio) {
            return !audio.paused;
        };
        else {
            audio = document.getElementById('main_audio_ie8');
            isPlaying = function(audio) {
                return audio.playState == 3;
            };
            audio.play = function() {
                this.controls.play();
            }
            audio.pause = function() {
                this.controls.pause();
            }
        }
        document.querySelector('.on-off-music').onclick = function() {
            if (isPlaying(audio)) {
                audio.pause();
                this.innerHTML = "<span style='background-image:url(http://tyl.yy.com/s/qxz/img/music-on.png)'></span>开启音乐";
            } else {
                audio.play();
                this.innerHTML = "<span style='background-image:url(http://tyl.yy.com/s/qxz/img/music-off.png)'></span>关闭音乐";
            }
        };
    </script>

</body>

</html>