Added volume slider

This commit is contained in:
Eduard Urbach 2018-03-11 18:17:35 +01:00
parent 5e8727da1d
commit ee071c3fe8
5 changed files with 76 additions and 18 deletions

View File

@ -0,0 +1,10 @@
component AudioPlayer
#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")
input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="100")

View File

@ -1,6 +1,7 @@
#audio-player
horizontal
vertical
default-transition
position relative
justify-content center
align-items center
margin 0.8rem 0
@ -35,3 +36,46 @@
.icon-play
transform translateX(3px)
mixin volume-slider-thumb
appearance none
width 18px
height 18px
transform scale(0.5)
border-radius 50%
background text-color
cursor pointer
opacity 0.25
box-shadow shadow-medium
default-transition
#audio-player-volume
appearance none
-webkit-appearance none
width 100%
height 6px
background rgba(0, 0, 0, 0.03)
outline none !important
border none !important
border-radius 0
padding 0
margin 0
margin-top 1rem
::-webkit-slider-thumb
volume-slider-thumb
-webkit-appearance none
::-moz-range-thumb
volume-slider-thumb
:active
transform none
:hover
background rgba(0, 0, 0, 0.06)
::-webkit-slider-thumb
background link-hover-color
opacity 1
transform scale(1)

View File

@ -52,14 +52,7 @@ 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")
AudioPlayer
.sidebar-link(aria-label="Search")
.sidebar-button

View File

@ -16,7 +16,7 @@ component Track(track *arn.SoundTrack, user *arn.User)
if user != nil && media.Service == "Youtube" && track.File != ""
.buttons
button.action(data-action="playAudio", data-trigger="click", data-audio-src="/audio/" + track.File)
button.action(data-action="playAudio", data-trigger="click", data-audio-src="/audio/" + track.File, data-soundtrack-id=track.ID)
Icon("play")
span Play in background

View File

@ -2,6 +2,8 @@ import { AnimeNotifier } from "../AnimeNotifier"
var audioContext: AudioContext
var audioNode: AudioBufferSourceNode
var gainNode: GainNode
var volume = 1.0
var playId = 0
var audioPlayer = document.getElementById("audio-player")
var audioPlayerPlay = document.getElementById("audio-player-play")
@ -11,6 +13,8 @@ var audioPlayerPause = document.getElementById("audio-player-pause")
export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
if(!audioContext) {
audioContext = new AudioContext()
gainNode = audioContext.createGain()
gainNode.gain.value = volume
}
playId++
@ -39,7 +43,8 @@ export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
audioNode = audioContext.createBufferSource()
audioNode.buffer = buffer
audioNode.connect(audioContext.destination)
audioNode.connect(gainNode)
gainNode.connect(audioContext.destination)
audioNode.start(0)
audioNode.onended = (event: MediaStreamErrorEvent) => {
@ -74,13 +79,15 @@ export function stopAudio(arn: AnimeNotifier) {
// Fade out sidebar player
audioPlayer.classList.add("fade-out")
if(!audioNode) {
return
if(gainNode) {
gainNode.disconnect()
}
audioNode.stop()
audioNode.disconnect()
audioNode = null
if(audioNode) {
audioNode.stop()
audioNode.disconnect()
audioNode = null
}
}
// Toggle audio
@ -95,8 +102,12 @@ export function toggleAudio(arn: AnimeNotifier, element: HTMLElement) {
}
// Set volume
export function setVolume(arn: AnimeNotifier, element: HTMLElement) {
export function setVolume(arn: AnimeNotifier, element: HTMLInputElement) {
volume = parseFloat(element.value) / 100.0
if(gainNode) {
gainNode.gain.value = volume
}
}
// Pause audio