代码之家  ›  专栏  ›  技术社区  ›  Elephants_Like_Crayons_Too

不确定为什么这个impl不能让音频持续循环

  •  1
  • Elephants_Like_Crayons_Too  · 技术社区  · 2 年前

    我一直在为我的浏览器开发一个自定义的起始页,希望它们能够播放我所有的收藏夹。我已经使用这种格式嵌入了所有歌曲:

    <audio src="Media/(Artist)/(song)" controls preload></audio>

    这很好,但我想添加一个重复功能,这样我就可以让歌曲不断播放,因为这就是我喜欢听音乐的方式,所以我添加了一个这样的复选框:

    <h2>
      <input type='checkbox' id='Repeat_Check' unchecked>
      <label for='Repeat_Check'>Repeat</label>
    </h2>
    
    

    使用它,我添加了这个js代码,试图让它检查歌曲是否已经结束,而重复复选框是真的,如果结束了,它应该重新启动音频:

    var Playing_Audio = document.getElementById('audio');
    var Repeat_Checkbox = getElementById('Repeat_Check')
    var Repeat_Checker = this.Repeat_Checkbox.CheckOnClick = true;
    Playing_Audio.onplay = function() {while(Repeat_Checker == true) {if(Playing_Audio.paused == true) {Playing_Audio.play}}};
    

    这是一个似乎无法正常工作的部分,是我犯了一个愚蠢的错误,还是这真的是糟糕的代码?

    注意:所有音频都存储在项目的Media文件夹中

    我试过在谷歌上搜索它,但所有的解决方案似乎都很复杂,我想使用我完全能理解的代码。我玩过它,这是我制作的最好的版本

    1 回复  |  直到 2 年前
        1
  •  2
  •   Dhruvil    2 年前

    复选框的id是“Repeat_Check”,但在JavaScript代码中,您试图使用getElementById(“Repeat_checkbox”)获取它。它应该是document.getElementById('Repeat_Check')。

    未选中复选框的属性不是未选中的,但未选中应为false。如果您希望在默认情况下选中该复选框,则可以将其更改为初始选中。

    循环条件中存在语法错误。应该使用while(Repeat_Checker==true),而不是while(重复检查器)。此外,您应该使用Repeat_Checkbox.checked来检查复选框是否被选中。

    在循环中,您有Playing_Audio.play。它应该是Playing_Audion.play()。

    以下是您的JavaScript代码的更正版本:

    var Playing_Audio = document.getElementById('audio');
    var Repeat_Checkbox = document.getElementById('Repeat_Check');
    var Repeat_Checker = Repeat_Checkbox.checked; // initial value
    
    Playing_Audio.onended = function() {
        if (Repeat_Checker) {
            Playing_Audio.currentTime = 0;
            Playing_Audio.play();
        }
    };
    
    // Update the repeat checker when the checkbox changes
    Repeat_Checkbox.addEventListener('change', function() {
        Repeat_Checker = this.checked;
    });
    

    此代码为音频元素的结束事件设置一个事件侦听器。当音频结束时,它会检查是否选中了重复复选框。如果是,它会重置音频的当前时间并再次播放。

    此外,我还为复选框更改事件添加了一个事件侦听器,以便在选中或取消选中复选框时更新Repeat_Checker变量。