如何使用javascript播放具有相同ID的两个音频文件

Posted 2023-02-25

【中文标题】如何使用javascript播放具有相同ID的两个音频文件

【英文标题】：how to play two audio files with same id with javascript

【发布时间】：2020-05-18 09:47:31

【问题描述】：

我有两个带有进度条的音频文件，并且都具有相同的 ID：

<audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio>
                    </p>
                            <button class="btn btn-success btn-sm" id="play">
                            <svg style='font-size: 1.3em' class="bi bi-play-fill"   
                                viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"/>
                            </svg>
                        </button>
                        <button class="btn btn-secondary btn-sm" id="pause">
                            <svg style='font-size: 1.3em' class="bi bi-pause-fill"   viewBox="0 0 16 16" 
                                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path d="M5.5 3.5A1.5 1.5 0 017 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5zm5 0A1.5 1.5 0 0112 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5z"/>
                            </svg>
                        </button>
                        <progress style="height: 4px;border: none;width: 300px;max-width: 330px" id="seekbar"  value="0" max="1">ssss

这里是js

  <script type="text/javascript">
$('#play').on('click', function() 
    document.getElementById('player'.).play();
);

$('#pause').on('click', function() 
    document.getElementById('player').pause();
);

$('#player').on('timeupdate', function() 
    $('#seekbar').attr("value", this.currentTime / this.duration);
);
</script>

现在我可以播放第一个音频文件，但不能播放第二个文件

我该怎么做？？？？？？

如果有任何其他解决方案，例如循环 id 或任何其他解决方案，请告诉我，因为我是 js 中的菜鸟

【问题讨论】：

"都具有相同的 id" ids 需要是唯一的，可以使用类吗？

那么我也必须为按钮使用不同的 id..

我是 js 的菜鸟，所以我真的不知道如何循环它

@kerbholz 抱歉，我正在编辑它

那么还有其他解决方案吗？

【参考方案1】：

document.getElementById 只返回第一个匹配项，如果要获取所有匹配项，请使用 document.querySelectorAll 代替。

你应该这样做

$('#play').on('click', function() 
    [...document.querySelectorAll('#player')].forEach(e => e.play());
);

$('#pause').on('click', function() 
    [...document.querySelectorAll('#player')].forEach(e => e.pause());
);

正如 kerbholz 提到的，id 应该是唯一的。如果它意味着有多个实例，请考虑改用class。

【讨论】：

这是什么e？

e 是 ID 为 player 的每个元素，因为您正在处理多个实例（也适用于单个元素），可以随意命名。 forEach 也是数组的循环函数

它可以工作，但只有一个错误是它同时播放两个音频文件

@AzanKorejo 这不是预期的行为吗？然后你必须一个一个地循环播放，在前一个完成后播放。

看问题中给出的图片