在Microsoft Edge中，Javascript音频播放()功能不能正常工作。

Question

我试图在Microsoft Edge中调用Javascript Audio Play()功能，但它不能正常工作，有时工作，有时不工作。我在Chrome和Firefox中尝试了同样的代码，它工作得很完美。只有MS Edge不稳定。

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

 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，微软Edge(Microsoft Edge 44.18362.449.0)和Edge chromium(Version 81.0.416.64(Official build)(64-bit))浏览器的传统版本)

编辑:

如果要使用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>

和 样品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中无法播放。所以我改变了顺序，我调用了模态函数，然后在 "显示 "事件中调用了Audio.play()方法，这使它工作（有点稳定）。