diff --git a/changes/changelog.d/1542.bugfix b/changes/changelog.d/1542.bugfix new file mode 100644 index 0000000000000000000000000000000000000000..9a11ea736f07bf2b1d082e6bac3481ecfa7d306c --- /dev/null +++ b/changes/changelog.d/1542.bugfix @@ -0,0 +1 @@ +Use global Howler volume instead of setting it separatly for each track (fixes #1542) diff --git a/changes/changelog.d/1543.bugfix b/changes/changelog.d/1543.bugfix new file mode 100644 index 0000000000000000000000000000000000000000..9c19432a4b1094929c8d824b9eb8d5ff08bfd671 --- /dev/null +++ b/changes/changelog.d/1543.bugfix @@ -0,0 +1 @@ +Store volume in logarithmic scale and convert when setting it to audio (fixes #1543) diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index eca218ef56fbfbc7cf07030c3f7029c6428d865e..d05571aadf0438ad3a98ca0e75f366528243f2f7 100644 --- a/front/src/components/audio/Player.vue +++ b/front/src/components/audio/Player.vue @@ -226,6 +226,7 @@ <script> import { mapState, mapGetters, mapActions } from "vuex" import GlobalEvents from "@/components/utils/global-events" +import { toLinearVolumeScale } from '@/audio/volume' import { Howl } from "howler" import $ from 'jquery' import _ from '@/lodash' @@ -265,8 +266,6 @@ export default { this.$store.commit("player/isLoadingAudio", false) Howler.unload() // clear existing cache, if any 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, // cf https://github.com/goldfire/howler.js#mobilechrome-playback // but we never actually load those audio files @@ -364,7 +363,6 @@ export default { loop: false, html5: true, preload: true, - volume: this.volume, onend: function () { self.ended() }, @@ -757,11 +755,12 @@ export default { }, immediate: false }, - volume(newValue) { - this.sliderVolume = newValue - if (this.currentSound) { - this.currentSound.volume(newValue) - } + volume: { + immediate: true, + handler(newValue) { + this.sliderVolume = newValue + Howler.volume(toLinearVolumeScale(newValue)) + }, }, sliderVolume(newValue) { this.$store.commit("player/volume", newValue) diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue index 6d765a25fbd9038e7e0402b80eabe65349ba6dfd..7f29976afaf6ebbe53f394b04976e1019e4c1a58 100644 --- a/front/src/components/audio/VolumeControl.vue +++ b/front/src/components/audio/VolumeControl.vue @@ -38,7 +38,6 @@ </template> <script> import { mapState, mapGetters, mapActions } from "vuex" -import { toLinearVolumeScale, toLogarithmicVolumeScale } from '@/audio/volume' export default { data () { @@ -50,10 +49,10 @@ export default { computed: { sliderVolume: { get () { - return toLogarithmicVolumeScale(this.$store.state.player.volume) + return this.$store.state.player.volume }, set (v) { - this.$store.commit("player/volume", toLinearVolumeScale(v)) + this.$store.commit("player/volume", v) } }, labels () {