javascript - 如何在不复制代码和更改变量的情况下使多个 html 元素使用相同的 Javascript?
问题描述
如果标题不清楚,我深表歉意,我用 html 和 java 创建了一个简单的音频播放器,有没有办法将其中的多个放在我的网站上,而无需重写所有变量、ID 和东西?
我想我需要使用类,但我对 OOP 的了解并不多,因此感谢您的帮助。
这是我的html:
<body>
<div id="wrapper">
<fieldset>
<legend>Song</legend>
<div id='player'>
<audio id="music_player" preload="metadata" loop>
<source src="music\song.mp3">
</audio>
<input type="image" src="images/playButton.png" onclick="play_aud()" id="play_button">
<input type="image" src="images/pauseButton.png" onclick="pause_aud()" id="play_button">
<input type="image" src="images/stopButton.png" onclick="stop_aud()" id="play_button">
<span id="current-time" class="time">0:00</span>
<input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time">0:00</span>
<input type="image" src="images/volumeButton.png" id="vol_img" onclick="mute()">
<input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
</div>
</fieldset>
</div>
</body>
<script src="script.js"></script>
和 Javascript:
let muteState = 'unmute';
var player;
const audioButton = document.getElementById('vol-img');
const currentTimeContainer = document.getElementById('current-time');
const audio = document.querySelector('audio');
const durationContainer = document.getElementById('duration');
const seekSlider = document.getElementById('seek-slider')
const calculateTime = (secs) => {
const minutes = Math.floor(secs / 60);
const seconds = Math.floor(secs % 60);
const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
return `${minutes}:${returnedSeconds}`;
}
const displayDuration = () => {
durationContainer.textContent = calculateTime(audio.duration);
}
const setSliderMax = () => {
seekSlider.max = Math.floor(audio.duration);
}
const displayBufferedAmount = () => {
const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
}
function startplayer()
{
player = document.getElementById('music_player');
player.controls = false;
}
function play_aud()
{
player.play();
}
function pause_aud()
{
player.pause();
}
function stop_aud()
{
player.pause();
player.currentTime = 0;
}
function change_vol()
{
player.volume=document.getElementById("change_vol").value;
}
function mute()
{
if(muteState == 'mute')
{
document.getElementById('vol_img').src = 'images/volumeButton.png';
muteState = 'unmute';
audio.muted = false;
}
else
{
document.getElementById('vol_img').src = 'images/volumeButtonmute.png';
muteState = 'mute'
audio.muted = true;
}
};
if (audio.readyState > 0) {
displayDuration();
setSliderMax();
displayBufferedAmount();
} else {
audio.addEventListener('loadedmetadata', () => {
displayDuration();
setSliderMax();
displayBufferedAmount();
});
}
audio.addEventListener('progress', displayBufferedAmount);
seekSlider.addEventListener('input', () => {
currentTimeContainer.textContent = calculateTime(seekSlider.value);
});
seekSlider.addEventListener('change', () => {
audio.currentTime = seekSlider.value;
});
audio.addEventListener('timeupdate', () => {
seekSlider.value = Math.floor(audio.currentTime);
currentTimeContainer.textContent = calculateTime(audio.currentTime);
});
解决方案
我已将所有代码转换为基于类的代码,因此现在您可以根据需要创建任意数量的实例
我已将所有 getElementById 更改为,querySelector
因为它更适合这种情况
class audio_player{
constructor(root){
this.html = `
<div id="wrapper">
<fieldset>
<legend>Song</legend>
<div id='player'>
<audio id="music_player" preload="metadata" loop>
<source src="music\song.mp3">
</audio>
<input type="image" src="images/playButton.png" onclick="play_aud()" id="play_button">
<input type="image" src="images/pauseButton.png" onclick="pause_aud()" id="play_button">
<input type="image" src="images/stopButton.png" onclick="stop_aud()" id="play_button">
<span id="current-time" class="time">0:00</span>
<input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time">0:00</span>
<input type="image" src="images/volumeButton.png" id="vol_img" onclick="mute()">
<input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
</div>
</fieldset>
</div>
`
root.innerHTML = this.html
this.html = root
this.interactivity()
}
interactivity(){
let muteState = 'unmute';
var player;
const audioButton = this.html.querySelector('#vol-img');
const currentTimeContainer = this.html.querySelector('#current-time');
const audio = this.html.querySelector('audio');
const durationContainer = this.html.querySelector('#duration');
const seekSlider = this.html.querySelector('#seek-slider')
const calculateTime = (secs) => {
const minutes = Math.floor(secs / 60);
const seconds = Math.floor(secs % 60);
const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
return `${minutes}:${returnedSeconds}`;
}
const displayDuration = () => {
durationContainer.textContent = calculateTime(audio.duration);
}
const setSliderMax = () => {
seekSlider.max = Math.floor(audio.duration);
}
const displayBufferedAmount = () => {
const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
}
function startplayer()
{
player = this.html.querySelector('#music_player');
player.controls = false;
}
function play_aud()
{
player.play();
}
function pause_aud()
{
player.pause();
}
function stop_aud()
{
player.pause();
player.currentTime = 0;
}
function change_vol()
{
player.volume=this.html.querySelector("#change_vol").value;
}
function mute()
{
if(muteState == 'mute')
{
this.html.querySelector('#vol_img').src = 'images/volumeButton.png';
muteState = 'unmute';
audio.muted = false;
}
else
{
this.html.querySelector('#vol_img').src = 'images/volumeButtonmute.png';
muteState = 'mute'
audio.muted = true;
}
};
if (audio.readyState > 0) {
displayDuration();
setSliderMax();
displayBufferedAmount();
} else {
audio.addEventListener('loadedmetadata', () => {
displayDuration();
setSliderMax();
displayBufferedAmount();
});
}
audio.addEventListener('progress', displayBufferedAmount);
seekSlider.addEventListener('input', () => {
currentTimeContainer.textContent = calculateTime(seekSlider.value);
});
seekSlider.addEventListener('change', () => {
audio.currentTime = seekSlider.value;
});
audio.addEventListener('timeupdate', () => {
seekSlider.value = Math.floor(audio.currentTime);
currentTimeContainer.textContent = calculateTime(audio.currentTime);
});
}
}
const newAudio1 = new audio_player(document.querySelector(".player1"))
const newAudio2 = new audio_player(document.querySelector(".player2"))
const newAudio3 = new audio_player(document.querySelector(".player3"))
<div class="player1"></div>
<div class="player2"></div>
<div class="player3"></div>
推荐阅读
- db2 - db2 rollforward 命令输出在非目录分区的“处理的日志文件”列中显示“-”
- java - RXJava Retrofit 返回 POST HTTP 错误 500
- java - 尝试在空对象引用上调用虚拟方法“android.widget.Filter com.app.app.adapter.TextTypingCustomAdapter.getFilter()”
- eyeshot - 你能告诉我有关 eyeshot 内核的信息吗
- typescript - 打字稿。如何实现泛型接口的构造函数
- c# - 矩形上的 DragMove 仅适用于边缘附近?
- r - r - 计算 delaunay 三角剖分中两点之间的最短距离
- c# - 为什么这个 UserControl 不能填充 TreeViewItem.Header?
- python - 如何仅使用数据模型 dunder 方法执行(高级)索引就地(增强)分配给 numpy 向量?
- sorting - 如何通过匹配来自其他单元格的值来排列数据