javascript - 如何使自定义音频播放器适用于多个音频?
问题描述
我的页面上有多个 HTML 音频,并希望将此自定义音频播放器应用于它们。问题是,这仅适用于第一个音频,不适用于第二个、第三个和第四个音频。有什么办法可以解决这个问题吗?
我的 JavaScript 代码:
const audio = document.getElementById('audio');
const playPauseButton = document.querySelector('.play-button');
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress-controls');
const playButton = document.querySelector('.playing');
const pauseButton = document.querySelector('.paused');
const playPause = () => {
if(audio.paused){
audio.play()
playButton.style.display = 'none';
pauseButton.style.display = '';
}
else{
audio.pause()
playButton.style.display = '';
pauseButton.style.display = 'none';
}
}
function pause(){
pauseButton.style.display = 'none'
}
window.addEventListener('load', pause);
playPauseButton.addEventListener('click', playPause);
audio.addEventListener('timeupdate', function(){
var progress = audio.currentTime / audio.duration;
progressBar.style.width = progress * 100 + "%";
});
document.addEventListener('keyup', (event) => {
if (event.code === 'Space') {
playPause();
}
if (event.code === 'KeyP') {
playPause();
}
});
解决方案
推荐阅读
- mongodb - -Spark Scala Mongodb- MongoTypeConversionException 无法将 STRING 转换为 StructType(...)
- vba - 打开用户窗体时隐藏组合框
- next.js - 首次使用 Next-Auth 创建用户时如何实例化模型?
- javascript - 查找辅助y轴的宽度
- python - df.plot.scatter: c 和 cmap
- java - DefaultUnitOfWork.reset() api 调用后未调用 Apache Camel MDC Logging - camel 3.10
- java - Eclipse 和 Maven:启动层初始化期间发生错误
- javascript - 使用 ApexCharts 的圆角图表
- javascript - Svelte 每个块中的速记属性
- mercurial - 在构建中使用 Mercurial 在最后一个版本之间生成更改日志