Javascript Audio Play() 函数在 Microsoft Edge 中无法正常工作

Question

我试图在 Microsoft Edge 中调用 Javascript Audio Play() 函数，但它无法正常工作，有时可以，有时不能。我在 Chrome 和 Firefox 中尝试了相同的代码，它运行良好。只有MS Edge不稳定。

我使用小于 300 KB 的 mp3 文件剪辑。

 let audioTrack = new Audio(file); 
 audioTrack.preload = 'auto'; 
 console.log(audio file [${file}] length: ${audioTrack.duration} sec.);
 audioTrack.onloadeddata = function () { 
   console.log(audio: ${file} has successfully loaded.); 
}; 
audioTrack.play();

更新：我更新了代码中的曲目列表：

<script>
    var sounds = new Array(new Audio("http://www.orangefreesounds.com/wp-content/uploads/2020/04/Heavy-synth-loop-126-bpm.mp3?_=1"),
        new Audio("http://www.orangefreesounds.com/wp-content/uploads/2020/04/Groove-synth-loop-130-bpm.mp3?_=1"),
        new Audio("http://www.orangefreesounds.com/wp-content/uploads/2020/04/Mystical-loop-118-bpm.mp3?_=1"),
        new Audio("http://www.orangefreesounds.com/wp-content/uploads/2020/04/New-generation-synth-loop-120.mp3?_=1"),
        new Audio("http://www.orangefreesounds.com/wp-content/uploads/2020/03/Synth-arp-music-loop-118.mp3?_=1"),
        new Audio("https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"),
       new Audio("http://soundbible.com/grab.php?id=2079&type=mp3"),
        new Audio("http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3"),
        new Audio("http://techslides.com/demos/samples/sample.mp3")
    );
    var i = -1;
    playSnd();

    function playSnd() {
        i++;
        if (i == sounds.length) return;
        sounds[i].onended = playSnd;
        sounds[i].play();
    };
</script>

它在 Edge 上运行良好，但我仍然不知道为什么在我的应用程序中仍然无法以稳定的方式运行。

Answer 1

尝试删除console.log命令或修改代码如下：

<script>
    function play() {
        var file = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3'
        let audioTrack = new Audio(file);
        audioTrack.preload = 'auto';
        console.log("audio file " + file + "length:" + audioTrack.duration + "  sec.");
        audioTrack.onloadeddata = function () {
            console.log("audio: " + file + " has successfully loaded."); 
        }; 
        audioTrack.play();
    }
</script>
<button onclick="play()">Play Audio</button>

以上代码在我这边运行良好（使用 IE、旧版 Microsoft Edge（Microsoft Edge 44.18362.449.0）和 Edge chromium（版本 81.0.416.64（正式版）（64 位））浏览器）

编辑:

使用JavaScript顺序播放多个声音文件，可参考以下范例：

示例 1：

<script>
    var sounds = new Array(new Audio("https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"),
        new Audio("http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3"),
        new Audio("http://techslides.com/demos/samples/sample.mp3"),
        new Audio("https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"),
        new Audio("http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3"),
        new Audio("http://techslides.com/demos/samples/sample.mp3"),
        new Audio("https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"),
        new Audio("http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3"),
        new Audio("http://techslides.com/demos/samples/sample.mp3")
    );
    var i = -1;
    playSnd();

    function playSnd() {
        i++;
        if (i == sounds.length) return;
        sounds[i].addEventListener('ended', playSnd);
        sounds[i].play();
    };
</script>

和sample 2（点击音频中的播放菜单，会依次播放多个声音）：

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3">
    Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
    <li class="active"><a href="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3">SoundHelix-Song-1.mp3</a></li>
    <li><a href="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3">SoundHelix-Song-2.mp3</a></li>
    <li><a href="http://techslides.com/demos/samples/sample.mp3">SoundHelix-Song-3.mp3</a></li>
    <li><a href="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3">SoundHelix-Song-4.mp3</a></li>
    <li><a href="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3">SoundHelix-Song-5.mp3</a></li>
    <li><a href="http://techslides.com/demos/samples/sample.mp3">SoundHelix-Song-6.mp3</a></li>
    <li><a href="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3">SoundHelix-Song-7.mp3</a></li>
    <li><a href="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3">SoundHelix-Song-c8.mp3</a></li>
    <li><a href="http://techslides.com/demos/samples/sample.mp3">SoundHelix-Song-9.mp3</a></li>
</ul>

<script>
    var audio;
    var playlist;
    var tracks;
    var current;

    init();
    function init() {
        current = 0;
        audio = $('audio');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length - 1;
        audio[0].volume = 0.6;
        playlist.find('a').click(function (e) {
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended', function (e) {
            current++;
            if (current == len) {
                current = 0;
                link = playlist.find('a')[0];
            } else {
                link = playlist.find('a')[current];
            }
            run($(link), audio[0]);
        });
    }
    function run(link, player) {
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
    }
</script>

Answer 2

谢谢大家，我发现了这个问题。在调用 Audio.play() 之前，我使用了 bootstrap 模式，由于某种原因，这使得声音无法在 Microsoft Edge 中播放。所以我改变了顺序，我调用了模态函数，然后在 'shown' 事件中我调用了 Audio.play() 方法，这使它工作（有点稳定）。

Javascript Audio Play() 函数在 Microsoft Edge 中无法正常工作

Javascript Audio Play() function not working properly in Microsoft Edge

javascript

html5-audio

microsoft-edge