330 lines
8.3 KiB
TypeScript
330 lines
8.3 KiB
TypeScript
import AnimeNotifier from "./AnimeNotifier"
|
|
import { Anime } from "./Types/Anime"
|
|
|
|
export default class AudioPlayer {
|
|
arn: AnimeNotifier
|
|
|
|
// Web audio
|
|
audioContext: AudioContext
|
|
audioNode: AudioBufferSourceNode | null
|
|
gainNode: GainNode
|
|
|
|
// Parameters
|
|
volume = 0.5
|
|
volumeTimeConstant = 0.01
|
|
volumeSmoothingDelay = 0.05
|
|
targetSpeed = 1.0
|
|
playId = 0
|
|
|
|
// Save last request so that we can cancel it
|
|
lastRequest: XMLHttpRequest | null
|
|
|
|
// DOM elements
|
|
audioPlayer: HTMLElement
|
|
audioPlayerPlay: HTMLButtonElement
|
|
audioPlayerPause: HTMLButtonElement
|
|
trackLink: HTMLLinkElement
|
|
animeInfo: HTMLElement
|
|
animeLink: HTMLLinkElement
|
|
animeImage: HTMLImageElement
|
|
|
|
constructor(arn: AnimeNotifier) {
|
|
this.arn = arn
|
|
this.audioPlayer = document.getElementById("audio-player") as HTMLElement
|
|
this.audioPlayerPlay = document.getElementById("audio-player-play") as HTMLButtonElement
|
|
this.audioPlayerPause = document.getElementById("audio-player-pause") as HTMLButtonElement
|
|
this.trackLink = document.getElementById("audio-player-track-title") as HTMLLinkElement
|
|
this.animeInfo = document.getElementById("audio-player-anime-info") as HTMLElement
|
|
this.animeLink = document.getElementById("audio-player-anime-link") as HTMLLinkElement
|
|
this.animeImage = document.getElementById("audio-player-anime-image") as HTMLImageElement
|
|
}
|
|
|
|
// Play audio file
|
|
play(trackId: string, trackUrl: string) {
|
|
if(typeof AudioContext === "undefined") {
|
|
alert("Your browser doesn't support web audio!")
|
|
return
|
|
}
|
|
|
|
if(!this.audioContext) {
|
|
this.audioContext = new AudioContext()
|
|
this.gainNode = this.audioContext.createGain()
|
|
this.gainNode.gain.setTargetAtTime(this.volume, this.audioContext.currentTime + this.volumeSmoothingDelay, this.volumeTimeConstant)
|
|
}
|
|
|
|
this.playId++
|
|
const currentPlayId = this.playId
|
|
|
|
if(this.lastRequest) {
|
|
this.lastRequest.abort()
|
|
this.lastRequest = null
|
|
}
|
|
|
|
// Stop current track
|
|
this.stop()
|
|
|
|
this.arn.currentMediaId = trackId
|
|
this.arn.markPlayingMedia()
|
|
this.arn.loading(true)
|
|
|
|
// Mark as loading
|
|
this.audioPlayer.classList.add("loading-network")
|
|
this.audioPlayer.classList.remove("decoding-audio")
|
|
this.audioPlayer.classList.remove("decoded")
|
|
|
|
// Request
|
|
const request = new XMLHttpRequest()
|
|
request.open("GET", trackUrl, true)
|
|
request.responseType = "arraybuffer"
|
|
|
|
request.onload = () => {
|
|
if(currentPlayId !== this.playId) {
|
|
return
|
|
}
|
|
|
|
// Mark as loading finished, now decoding starts
|
|
this.audioPlayer.classList.add("decoding-audio")
|
|
this.arn.loading(false)
|
|
|
|
// Connect gain node to audio context when the response arrives.
|
|
// Connecting it instantly on audio context creation would fail
|
|
// without any error and also wouldn't work on audio source changes.
|
|
this.gainNode.connect(this.audioContext.destination)
|
|
|
|
// Show status message
|
|
this.arn.statusMessage.showInfo("Decoding audio...", -1)
|
|
|
|
this.audioContext.decodeAudioData(request.response, async buffer => {
|
|
if(currentPlayId !== this.playId) {
|
|
return
|
|
}
|
|
|
|
// Close status message
|
|
this.arn.statusMessage.showInfo(`Playing "${this.trackLink.textContent}"`)
|
|
|
|
// Mark as ready
|
|
this.audioPlayer.classList.add("decoded")
|
|
|
|
this.audioNode = this.audioContext.createBufferSource()
|
|
this.audioNode.buffer = buffer
|
|
this.audioNode.connect(this.gainNode)
|
|
this.audioNode.playbackRate.setValueAtTime(this.targetSpeed, 0)
|
|
this.audioNode.start(0)
|
|
|
|
this.audioNode.onended = (_: MediaStreamErrorEvent) => {
|
|
if(currentPlayId !== this.playId) {
|
|
return
|
|
}
|
|
|
|
this.next()
|
|
}
|
|
}, err => {
|
|
if(currentPlayId !== this.playId) {
|
|
return
|
|
}
|
|
|
|
this.arn.statusMessage.showError("Your browser can't decode this audio file.")
|
|
console.error(err)
|
|
})
|
|
}
|
|
|
|
request.onprogress = e => {
|
|
if(!e.lengthComputable) {
|
|
return
|
|
}
|
|
|
|
const progress = e.loaded / e.total * 100
|
|
this.arn.statusMessage.showInfo(`Loading audio...${progress.toFixed(1)}%`, -1)
|
|
}
|
|
|
|
request.onerror = () => {
|
|
this.arn.loading(false)
|
|
}
|
|
|
|
// Show status message
|
|
this.arn.statusMessage.showInfo("Loading audio...", -1)
|
|
|
|
this.lastRequest = request
|
|
request.send()
|
|
|
|
// Resume audio context if it was paused before
|
|
if(this.audioContext.state === "suspended") {
|
|
this.audioContext.resume()
|
|
}
|
|
|
|
// Update track info
|
|
this.updateTrackInfo(trackId)
|
|
|
|
// Show audio player
|
|
this.audioPlayer.classList.remove("fade-out")
|
|
this.audioPlayerPlay.classList.add("fade-out")
|
|
this.audioPlayerPause.classList.remove("fade-out")
|
|
}
|
|
|
|
// Pause
|
|
pause() {
|
|
if(!this.audioNode || !this.audioContext || this.audioContext.state === "suspended") {
|
|
return
|
|
}
|
|
|
|
this.audioNode.playbackRate.setValueAtTime(0.0, 0)
|
|
this.audioContext.suspend()
|
|
|
|
this.audioPlayerPlay.classList.remove("fade-out")
|
|
this.audioPlayerPause.classList.add("fade-out")
|
|
}
|
|
|
|
// Resume
|
|
resume() {
|
|
if(!this.audioNode) {
|
|
this.next()
|
|
return
|
|
}
|
|
|
|
if(!this.audioContext || this.audioContext.state === "running") {
|
|
return
|
|
}
|
|
|
|
this.audioNode.playbackRate.setValueAtTime(this.targetSpeed, 0)
|
|
this.audioContext.resume()
|
|
|
|
this.audioPlayerPlay.classList.add("fade-out")
|
|
this.audioPlayerPause.classList.remove("fade-out")
|
|
}
|
|
|
|
// Stop
|
|
stop() {
|
|
this.arn.currentMediaId = ""
|
|
|
|
// Remove CSS class "playing"
|
|
const playingElements = document.getElementsByClassName("playing")
|
|
|
|
for(const playing of playingElements) {
|
|
playing.classList.remove("playing")
|
|
}
|
|
|
|
// Fade out sidebar player
|
|
// audioPlayer.classList.add("fade-out")
|
|
|
|
// Remove title
|
|
this.trackLink.href = ""
|
|
this.trackLink.textContent = ""
|
|
|
|
// Hide anime info
|
|
this.animeLink.href = ""
|
|
this.animeInfo.classList.add("hidden")
|
|
this.animeImage.classList.add("hidden")
|
|
|
|
// Show play button
|
|
this.audioPlayerPlay.classList.remove("fade-out")
|
|
this.audioPlayerPause.classList.add("fade-out")
|
|
|
|
if(this.gainNode) {
|
|
this.gainNode.disconnect()
|
|
}
|
|
|
|
if(this.audioNode) {
|
|
this.audioNode.stop()
|
|
this.audioNode.disconnect()
|
|
this.audioNode = null
|
|
}
|
|
}
|
|
|
|
// Previous track
|
|
previous() {
|
|
this.arn.statusMessage.showInfo("Previous track feature is currently work in progress! Check back later :)")
|
|
}
|
|
|
|
// Next track
|
|
async next() {
|
|
// Get random track
|
|
const response = await fetch("/api/next/soundtrack")
|
|
const track = await response.json()
|
|
|
|
this.play(track.id, "https://notify.moe/audio/" + track.file)
|
|
// arn.statusMessage.showInfo("Now playing: " + track.title)
|
|
|
|
return track
|
|
}
|
|
|
|
// Set volume
|
|
setVolume(volume: number) {
|
|
this.volume = volume
|
|
|
|
if(!this.gainNode) {
|
|
return
|
|
}
|
|
|
|
this.gainNode.gain.setTargetAtTime(volume, this.audioContext.currentTime + this.volumeSmoothingDelay, this.volumeTimeConstant)
|
|
}
|
|
|
|
// Add speed
|
|
addSpeed(speed: number) {
|
|
if(!this.audioNode || this.audioContext.state === "suspended") {
|
|
return
|
|
}
|
|
|
|
this.targetSpeed += speed
|
|
|
|
if(this.targetSpeed < 0.5) {
|
|
this.targetSpeed = 0.5
|
|
} else if(this.targetSpeed > 2) {
|
|
this.targetSpeed = 2
|
|
}
|
|
|
|
this.audioNode.playbackRate.setValueAtTime(this.targetSpeed, 0)
|
|
this.arn.statusMessage.showInfo("Playback speed: " + Math.round(this.targetSpeed * 100) + "%")
|
|
}
|
|
|
|
// Play or pause
|
|
playPause() {
|
|
if(!this.audioNode) {
|
|
this.next()
|
|
return
|
|
}
|
|
|
|
if(this.audioContext.state === "suspended") {
|
|
this.resume()
|
|
} else {
|
|
this.pause()
|
|
}
|
|
}
|
|
|
|
// Update track info
|
|
async updateTrackInfo(trackId: string) {
|
|
// Set track title
|
|
const trackInfoResponse = await fetch("/api/soundtrack/" + trackId)
|
|
const track = await trackInfoResponse.json()
|
|
this.trackLink.href = "/soundtrack/" + track.id
|
|
this.trackLink.textContent = track.title.canonical || track.title.native
|
|
|
|
// Find anime ID by looking at the tags
|
|
let animeId = ""
|
|
|
|
if(!track.tags) {
|
|
return
|
|
}
|
|
|
|
for(const tag of (track.tags as string[])) {
|
|
if(tag.startsWith("anime:")) {
|
|
animeId = tag.split(":")[1]
|
|
break
|
|
}
|
|
}
|
|
|
|
if(animeId === "") {
|
|
return
|
|
}
|
|
|
|
// Set anime info
|
|
this.animeInfo.classList.remove("hidden")
|
|
const animeResponse = await fetch("/api/anime/" + animeId)
|
|
const anime = await animeResponse.json() as Anime
|
|
this.animeLink.title = anime.title.canonical
|
|
this.animeLink.href = "/anime/" + anime.id
|
|
this.animeImage.dataset.src = "//media.notify.moe/images/anime/medium/" + anime.id + ".jpg?" + anime.image.lastModified.toString()
|
|
this.animeImage.classList.remove("hidden")
|
|
this.animeImage["became visible"]()
|
|
}
|
|
}
|