ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Continuous playing between songs fixed.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-18 01:59:54 -05:00
parent 8cb39bf9cc
commit 62145ef741
4 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
audioshowkit/src/player/PlaylistSong.js
View File

@ -36,18 +36,27 @@ export default class PlayListSong {
* @returns {HTMLAudioElement} The audio element that represents this song. * @returns {HTMLAudioElement} The audio element that represents this song.
*/ */
fetchAudio(onReady) { fetchAudio(onReady) {
console.log("Fetching audio...");
if (this.#audio) { if (this.#audio) {
if (this.#ready) { if (this.#ready) {
console.log("Already ready.");
if (onReady) onReady(this.#audio); if (onReady) onReady(this.#audio);
} else if (onReady) {
this.#audio.addEventListener("canplaythrough", () => {
onReady(this.#audio);
}, { once: true });
} }
return this.#audio; return this.#audio;
} }
this.#audio = new Audio(this.#url); this.#audio = new Audio(this.#url);
console.log("Audio is not ready. Loading."); console.log("Fetching from url: " + this.#url);
const listener = () => { const listener = () => {
this.#ready = true; this.#ready = true;
console.log("attempting to invoke onReady.");
console.log(onReady);
if (onReady && this.isAudioInstantiated()) { if (onReady && this.isAudioInstantiated()) {
onReady(this.#audio); onReady(this.#audio);
console.log("onReady invoked.");
} }
}; };
this.#audio.addEventListener("canplaythrough", listener, { once: true }); this.#audio.addEventListener("canplaythrough", listener, { once: true });
@ -180,7 +189,9 @@ export default class PlayListSong {
* Stops the visualizer. * Stops the visualizer.
*/ */
unloadVisualizer() { unloadVisualizer() {
if (this.#visualizer) {
this.#visualizer.stop(); this.#visualizer.stop();
this.#visualizer = null; this.#visualizer = null;
} }
} }
}

9
audioshowkit/src/player/SongPlayer.js
View File

@ -1,4 +1,4 @@
import "../styles/songplayer.css"; import "../styles/songPlayer.css";
import PlayListSong from "./PlaylistSong.js"; import PlayListSong from "./PlaylistSong.js";
import SongPlaylist from "./SongPlaylist.js"; import SongPlaylist from "./SongPlaylist.js";
@ -10,6 +10,7 @@ export default class SongPlayer {
#current = 0; #current = 0;
#volume = 1; #volume = 1;
#autoplay = false; #autoplay = false;
#wasPlaying = false;
#playlistChangeListeners = []; #playlistChangeListeners = [];
#currentSongChangeListeners = []; #currentSongChangeListeners = [];
#volumeChangeListeners = []; #volumeChangeListeners = [];
@ -95,7 +96,7 @@ export default class SongPlayer {
this.currentSong.fetchAudio().addEventListener(key, listener); this.currentSong.fetchAudio().addEventListener(key, listener);
}); });
}); });
if (this.#autoplay) { if (this.#wasPlaying || this.#autoplay) {
this.playCurrent(); this.playCurrent();
} }
return true; return true;
@ -110,12 +111,12 @@ export default class SongPlayer {
} }
playCurrent() { playCurrent() {
console.log("Attempting to play..."); console.log("playing " + this.#current);
this.currentSong.fetchAudio((audio) => { this.currentSong.fetchAudio((audio) => {
audio.volume = this.volume; audio.volume = this.volume;
audio.play(); audio.play();
console.log("playing...");
}); });
this.#wasPlaying = true;
} }
/** /**

9
audioshowkit/src/styles/songplayer.css → audioshowkit/src/styles/songPlayer.css
View File

@ -1,13 +1,14 @@
.player.play-btn { .player.play-btn {
box-sizing: border-box; box-sizing: border-box;
height: 60px; height: 48px;
width: 48;
transition: 80ms all ease; transition: 80ms all ease;
will-change: border-width; will-change: border-width;
cursor: pointer; cursor: pointer;
border-color: transparent transparent transparent black; border-color: transparent transparent transparent black;
border-style: solid; border-style: solid;
border-width: 30px 0px 30px 50px; border-width: 24px 0px 24px 48px;
} }
.player.play-btn.pause { .player.play-btn.pause {
@ -18,10 +19,14 @@
.player.next { .player.next {
border-style: none; border-style: none;
width: 48px;
height: 48px;
} }
.player.previous { .player.previous {
border-style: none; border-style: none;
width: 48px;
height: 48px;
} }
table.player { table.player {

2
showcase/src/js/main.js
View File

@ -7,3 +7,5 @@ playlist.add("/audio/XXI.mp3", "XXI", "QR");
const player = ask.player.createSongPlayer(playlist); const player = ask.player.createSongPlayer(playlist);
const playerElem = document.getElementById("player-showcase"); const playerElem = document.getElementById("player-showcase");
playerElem.appendChild(player.generatePlayElement()); playerElem.appendChild(player.generatePlayElement());
playerElem.appendChild(player.generateNextElement());
playerElem.appendChild(player.generatePreviousElement());