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

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

Answer 2

尝试删除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>