Javascript Функция Audio Play () не работает должным образом в Microsoft Edge - PullRequest
Новая
       83

Javascript Функция Audio Play () не работает должным образом в Microsoft Edge

0 голосов
/ 27 апреля 2020

Я пытаюсь вызвать функцию Javascript Audio Play () в Microsoft Edge, но она не работает должным образом, иногда она работает, а иногда нет. Я попробовал тот же код в Chrome и Firefox, и он работает отлично. Только MS Edge нестабилен.

Я использую mp3-файлы размером менее 300 КБ клипов. 

 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, но я до сих пор не знаю, почему в моем приложении все еще не работает стабильно.

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Спасибо всем, я обнаружил проблему. Я использую модальный bootstrap перед вызовом Audio.play (), по какой-то причине звук не воспроизводится в Microsoft Edge. Поэтому я изменил последовательность, я вызвал модальную функцию, затем в событии «показ» я вызвал метод Audio.play (), который заставил его работать (вроде стабильно).

0 голосов
/ 27 апреля 2020

Попробуйте удалить команду 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>

и семпл 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>
...