4

以下代码在 IE9+（以及 Firefox 和 Chrome）中播放声音。是否有为 IE8实现/填充缺失功能（audio元素和play()方法）的库？

我无法mediaelement.js正常工作，使用 jQuery 或放入其中<object>看起来<audio>很丑陋。一些全局初始化（如shim.init(somepath)）让 shim 找到它的 flash 文件很好，但是每个标签的代码在我看来是错误的，因为它应该可以自动化。

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function foo()
        {
            var audio = document.getElementById('foo')
            audio.play()    
        }

    </script>
</head>
<body>
    <audio id="foo" preload="none">
        <source src="foo.mp3" type="audio/mpeg">
        <source src="foo.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
    <button onclick="foo()">Play</button>
</body>
</html>
4

1 回答 1

0

您可以使 MEJS 工作，而无需在 IE[7-8] 中添加额外的库（但 jQuery）或 polyfill，并且无需在object标签中添加audio标签。

解决方法是在设置中创建一个全局对象success，IE 在使用.play()( ... 或.pause()) 方法之前可以使用该对象

所以，有了这个简单的 html

<audio id="myAudioPlayer" src="media/audio.mp3" preload="none"></audio>

<button onclick="audioPlay();">Play</button> 
<button onclick="audioPause();">Pause</button> <!-- optional -->

您可以使用以下代码：

var audio; // global object to be used by IE (and all browsers as a matter of fact)
var isPlaying = false; // flag for event listeners

function audioPlay() {
    // only call play() method if audio is not playing
    // avoids multiple playbacks in IE
    if (!isPlaying) {
        audio.play();
        isPlaying = true;
    }
};

function audioPause() {
    // only call pause() method if audio is playing
    if (isPlaying) {
        audio.pause();
        isPlaying = false;
    }
};

jQuery(document).ready(function ($) {
    var player = new MediaElementPlayer("#myAudioPlayer", {
        success: function (mediaElement, domObject) {
            audio = mediaElement; // set value to global object to be used outside the success setting by IE
            // event listeners so we only call our functions when needed 
            audio.addEventListener('playing', function () {
                isPlaying = true;
            }, false);
            audio.addEventListener('pause', function () {
                isPlaying = false;
            }, false);
        }
    });
}); // ready

请注意，我们添加了几个事件侦听器，因此我们仅在需要时调用我们的方法（并避免在 IE 中多次播放）

见JSFIDDLE

笔记

此代码用于audio元素。Video元素可能需要其他解决方法。

于 2014-06-30T01:07:05.027 回答