2 версия сайта, чтобы было совсем красиво

2023-04-27 18:04:54 +07:00
parent e7a2be67ff
commit aac4d9fdda
9 changed files with 244 additions and 84 deletions
@@ -0,0 +1,64 @@
+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';
+        }
+    }
+}