jQuery 音频播放器 - 未捕获（承诺）DOMException：加载失败，因为找不到支持的源答案

【问题标题】：jQuery Audio Player - Uncaught (in promise) DOMException: Failed to load because no supported source was foundjQuery 音频播放器 - 未捕获（承诺）DOMException：加载失败，因为找不到支持的源
【发布时间】：2021-08-21 08:34:20
【问题描述】：

对于一个语言学习网站，我创建了自己的音频播放器。

在一个页面上，总是有几个播放器按钮，每个按钮都用于播放与特定示例对应的声音。

问题是，有时，某些音频无法播放，我收到“未捕获（承诺）DOMException：加载失败，因为找不到支持的源。”在控制台中。这个错误总是随机的，它会在不同的时间影响不同的音频。如果我刷新页面，尤其是清除缓存，我可以播放之前没有播放的音频。

我试图通过捕获错误并尝试再次获取音频来解决它，但似乎我做错了什么。

如果有任何帮助，我将不胜感激。

这是播放器的代码：

HTML/PHP：

<div class="player_cont">
    <!-- NORMAL PLAYBACK SPEED -->
    <a id="player_<?php echo $id; ?>_n" class="player play" data-id="<?php echo $id; ?>_n" data-audio="<?php echo $audio; ?>" data-speed="1" data-playing="0"></a>
    <!-- SLOWED DOWN PLAYBACK SPEED -->
    <a id="player_<?php echo $id; ?>_s" class="player play slow" data-id="<?php echo $id; ?>_s" data-audio="<?php echo $audio; ?>" data-speed="0.7" data-playing="0"></a>
</div>

jQuery:

jQuery(document).ready(function(){
    var $ = jQuery;

    var playerBtns = $('.player'); // get all the player buttons on the page
    var audios = new Array(); // array for collecting audio files for each player ID
    
    // populate the audios array with audio files
    playerBtns.each(function(index, player) {
        var audio = new Audio($(player).data('audio'));
        var id = $(player).data('id');
        audios[id] = audio;
    }); 

    // when player button is clicked
    playerBtns.on("click",function() {

        var id = $(this).data('id');
        var player = $('#player_' + id);
        var speed = player.data('speed');
        var isPlaying = player.attr('data-playing');

        // if audio was not playing, play it
        if (isPlaying == 0) {
            player.removeClass('play').addClass('pause').attr('data-playing', 1);
            
            var playPromise = audios[id].play();
            if (playPromise !== undefined) {
                playPromise.then(function() {
                    audios[id].playbackRate = speed;
                    audios[id].play();
                    isPlaying = 1;
                })
                .catch(function(error) {
                    // try to fetch the audio file again
                    var playerRetry = $('#player_' + id);
                    var audioRetry = new Audio($(playerRetry).data('audio'));
                    audioRetry.play(); // <-- it never works out
                });
            }

        } 
        // if audio was playing, pause it
        else {
            player.removeClass('pause').addClass('play').attr('data-playing', 0);
            audios[id].pause();
            isPlaying = 0;
        }
        
        // when audio finished playing
        audios[id].onended = function() {
            player.removeClass('pause').addClass('play').attr('data-playing', 0);
            isPlaying = 0;
        };
    });

});

谢谢。

【问题讨论】：

标签： jquery audio-player

【解决方案1】：

经过几个月的努力，我发现问题不在我的代码中，而是由 PWA WordPress 插件引起的。

禁用插件并完全清除浏览器缓存和 cookie 一起解决了这个问题。

【讨论】：