Implemented audio player

layout/sidebar/audioplayer.scarlet

@@ -0,0 +1,36 @@
+#audio-player
+	horizontal
+	default-transition
+	justify-content center
+	align-items center
+	margin 0.8rem 0
+
+.audio-player-play-pause-container
+	position relative
+	width 48px
+	height 48px
+
+#audio-player-play,
+#audio-player-pause
+	position absolute
+	left 0
+	top 0
+	display flex
+	justify-content center
+	align-items center
+	font-size 1.5rem
+	background rgba(0, 0, 0, 0.03)
+	border none
+	border-radius 50%
+	width 100%
+	height 100%
+
+	:hover
+		color button-hover-color
+		background button-hover-background
+
+	&.fade-out
+		pointer-events none
+
+	.icon-play
+		transform translateX(3px)

layout/sidebar/sidebar.pixy

@@ -52,6 +52,15 @@ component Sidebar(user *arn.User)
 
 		.spacer
 
+		
+		#audio-player.fade-out
+			.audio-player-play-pause-container
+				button#audio-player-play.action(data-action="resumeAudio", data-trigger="click")
+					RawIcon("play")
+				
+				button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click")
+					RawIcon("pause")
+		
 		.sidebar-link(aria-label="Search")
 			.sidebar-button
 				Icon("search")

scripts/Actions/Audio.ts

@@ -1,13 +1,58 @@
 import { AnimeNotifier } from "../AnimeNotifier"
 
+var audioContext: AudioContext
+var audioNode: AudioBufferSourceNode
+
 // Play audio file
 export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
-	if(!arn.audio) {
+	if(!audioContext) {
-		arn.audio = document.createElement("audio") as HTMLAudioElement
+		audioContext = new AudioContext()
-		let source = document.createElement("source") as HTMLSourceElement
-		source.src = button.dataset.src
-		arn.audio.appendChild(source)
 	}
 
-	arn.audio.play()
+	if(audioNode) {
+		audioNode.stop()
+	}
+
+	let request = new XMLHttpRequest()
+	request.open("GET", button.dataset.src, true)
+	request.responseType = "arraybuffer"
+	request.onload = () => {
+		audioContext.decodeAudioData(request.response, buffer => {
+			console.log("play")
+			audioNode = audioContext.createBufferSource()
+			audioNode.buffer = buffer
+			audioNode.connect(audioContext.destination)
+			audioNode.start(0)
+		}, console.error)
+	}
+	request.send()
+
+	// Show audio player
+	document.getElementById("audio-player").classList.remove("fade-out")
+	document.getElementById("audio-player-play").classList.add("fade-out")
+	document.getElementById("audio-player-pause").classList.remove("fade-out")
+}
+
+// Pause audio
+export function pauseAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
+	if(!audioNode) {
+		return
+	}
+
+	audioNode.playbackRate.setValueAtTime(0.0, 0)
+
+	document.getElementById("audio-player-play").classList.remove("fade-out")
+	document.getElementById("audio-player-pause").classList.add("fade-out")
+}
+
+// Resume audio
+export function resumeAudio(arn: AnimeNotifier, button: HTMLButtonElement) {
+	if(!audioNode) {
+		return
+	}
+
+	audioNode.playbackRate.setValueAtTime(1.0, 0)
+
+	document.getElementById("audio-player-play").classList.add("fade-out")
+	document.getElementById("audio-player-pause").classList.remove("fade-out")
 }

scripts/AnimeNotifier.ts

@@ -32,7 +32,6 @@ export class AnimeNotifier {
 	mainPageLoaded: boolean
 	isLoading: boolean
 	lastReloadContentPath: string
-	audio: HTMLAudioElement
 
 	elementFound: MutationQueue
 	elementNotFound: MutationQueue