Implemented audio player

This commit is contained in:
Eduard Urbach 2018-03-11 04:45:01 +01:00
parent 8071e18c65
commit 42c16053a9
4 changed files with 96 additions and 7 deletions

View File

@ -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)

View File

@ -52,6 +52,15 @@ component Sidebar(user *arn.User)
.spacer .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-link(aria-label="Search")
.sidebar-button .sidebar-button
Icon("search") Icon("search")

View File

@ -1,13 +1,58 @@
import { AnimeNotifier } from "../AnimeNotifier" import { AnimeNotifier } from "../AnimeNotifier"
var audioContext: AudioContext
var audioNode: AudioBufferSourceNode
// Play audio file // Play audio file
export function playAudio(arn: AnimeNotifier, button: HTMLButtonElement) { 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")
} }

View File

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