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:
parent
ffc9109a45
commit
13c3b22b02
|
@ -0,0 +1 @@
|
||||||
|
Use global Howler volume instead of setting it separatly for each track (fixes #1542)
|
|
@ -0,0 +1 @@
|
||||||
|
Store volume in logarithmic scale and convert when setting it to audio (fixes #1543)
|
|
@ -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)
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
Loading…
Reference in New Issue