64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
class AudioPlayer {
|
|
constructor(options) {
|
|
this.container = options.container;
|
|
this.audio = new Audio(options.audioFile);
|
|
this.isPlaying = false;
|
|
|
|
this.playButton = null;
|
|
this.pauseButton = null;
|
|
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
const containerElement = document.querySelector(this.container);
|
|
|
|
const audioPlayerElement = document.createElement('div');
|
|
audioPlayerElement.id = 'audio-player';
|
|
|
|
const audioControlsElement = document.createElement('div');
|
|
audioControlsElement.id = 'audio-controls';
|
|
|
|
this.playButton = document.createElement('button');
|
|
this.playButton.innerHTML = '<i class="fa fa-play"></i>';
|
|
this.playButton.addEventListener('click', () => {
|
|
if (!this.isPlaying) {
|
|
this.play();
|
|
}
|
|
});
|
|
|
|
this.pauseButton = document.createElement('button');
|
|
this.pauseButton.innerHTML = '<i class="fa fa-pause"></i>';
|
|
this.pauseButton.addEventListener('click', () => {
|
|
if (this.isPlaying) {
|
|
this.pause();
|
|
}
|
|
});
|
|
|
|
audioControlsElement.appendChild(this.playButton);
|
|
audioControlsElement.appendChild(this.pauseButton);
|
|
|
|
audioPlayerElement.appendChild(audioControlsElement);
|
|
|
|
containerElement.appendChild(audioPlayerElement);
|
|
this.pauseButton.style.display = 'none';
|
|
}
|
|
|
|
play() {
|
|
if (!this.isPlaying) {
|
|
this.audio.play();
|
|
this.isPlaying = true;
|
|
this.playButton.style.display = 'none';
|
|
this.pauseButton.style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
pause() {
|
|
if (this.isPlaying) {
|
|
this.audio.pause();
|
|
this.isPlaying = false;
|
|
this.playButton.style.display = 'inline-block';
|
|
this.pauseButton.style.display = 'none';
|
|
}
|
|
}
|
|
} |