Set global howler volume, use log volume scale internally

fixes:
- next track volume
- saves precise volume slider position
- keyboard shortcut now sets volume in correct scale
This commit is contained in:
JuniorJPDJ 2021-06-24 05:25:39 +02:00 committed by Georg Krause
parent ffc9109a45
commit 13c3b22b02
4 changed files with 11 additions and 11 deletions

View File

@ -0,0 +1 @@
Use global Howler volume instead of setting it separatly for each track (fixes #1542)

View File

@ -0,0 +1 @@
Store volume in logarithmic scale and convert when setting it to audio (fixes #1543)

View File

@ -226,6 +226,7 @@
<script> <script>
import { mapState, mapGetters, mapActions } from "vuex" import { mapState, mapGetters, mapActions } from "vuex"
import GlobalEvents from "@/components/utils/global-events" import GlobalEvents from "@/components/utils/global-events"
import { toLinearVolumeScale } from '@/audio/volume'
import { Howl } from "howler" import { Howl } from "howler"
import $ from 'jquery' import $ from 'jquery'
import _ from '@/lodash' import _ from '@/lodash'
@ -265,8 +266,6 @@ export default {
this.$store.commit("player/isLoadingAudio", false) this.$store.commit("player/isLoadingAudio", false)
Howler.unload() // clear existing cache, if any Howler.unload() // clear existing cache, if any
this.nextTrackPreloaded = false this.nextTrackPreloaded = false
// we trigger the watcher explicitely it does not work otherwise
this.sliderVolume = this.volume
// this is needed to unlock audio playing under some browsers, // this is needed to unlock audio playing under some browsers,
// cf https://github.com/goldfire/howler.js#mobilechrome-playback // cf https://github.com/goldfire/howler.js#mobilechrome-playback
// but we never actually load those audio files // but we never actually load those audio files
@ -364,7 +363,6 @@ export default {
loop: false, loop: false,
html5: true, html5: true,
preload: true, preload: true,
volume: this.volume,
onend: function () { onend: function () {
self.ended() self.ended()
}, },
@ -757,11 +755,12 @@ export default {
}, },
immediate: false immediate: false
}, },
volume(newValue) { volume: {
this.sliderVolume = newValue immediate: true,
if (this.currentSound) { handler(newValue) {
this.currentSound.volume(newValue) this.sliderVolume = newValue
} Howler.volume(toLinearVolumeScale(newValue))
},
}, },
sliderVolume(newValue) { sliderVolume(newValue) {
this.$store.commit("player/volume", newValue) this.$store.commit("player/volume", newValue)

View File

@ -38,7 +38,6 @@
</template> </template>
<script> <script>
import { mapState, mapGetters, mapActions } from "vuex" import { mapState, mapGetters, mapActions } from "vuex"
import { toLinearVolumeScale, toLogarithmicVolumeScale } from '@/audio/volume'
export default { export default {
data () { data () {
@ -50,10 +49,10 @@ export default {
computed: { computed: {
sliderVolume: { sliderVolume: {
get () { get () {
return toLogarithmicVolumeScale(this.$store.state.player.volume) return this.$store.state.player.volume
}, },
set (v) { set (v) {
this.$store.commit("player/volume", toLinearVolumeScale(v)) this.$store.commit("player/volume", v)
} }
}, },
labels () { labels () {