Skip to content

Commit

Permalink
feat(live): add bgm volume slider
Browse files Browse the repository at this point in the history
  • Loading branch information
toyobayashi committed Jan 4, 2022
1 parent a463eae commit 8079149
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 3 deletions.
20 changes: 18 additions & 2 deletions app/src/ts/renderer/audio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const { Acb } = window.node.acb

class MishiroAudio extends EventEmitter {
#ctx: AudioContext = new AudioContext()
#gainNode = this.#ctx.createGain()

#startedAt: number = 0 // absolute time
#pausedAt: number = 0 // relative time
Expand Down Expand Up @@ -92,6 +93,21 @@ class MishiroAudio extends EventEmitter {
return this.#duration
}

public get volume (): number {
return this.#gainNode.gain.value
}

public set volume (value: number) {
if (Number.isNaN(value)) return
this.#gainNode.gain.value = value > 1 ? 1 : (value < 0 ? 0 : value)
this.emit('volumechange')
}

public constructor () {
super()
this.#gainNode.connect(this.#ctx.destination)
}

private _initSource (audioBuffer: AudioBuffer, clearOnEnded = false): void {
try {
if (this.#source) {
Expand All @@ -109,14 +125,14 @@ class MishiroAudio extends EventEmitter {
this.#source.onended = () => {
this.emit('ended')
}
this.#source.connect(this.#ctx.destination)
this.#source.connect(this.#gainNode)
}

public async playRawSide (src: string | BufferLike): Promise<void> {
const audioBuffer = await decodeAudioBuffer(this.#ctx, src)
let source = this.#ctx.createBufferSource()
source.buffer = audioBuffer
source.connect(this.#ctx.destination)
source.connect(this.#gainNode)
source.start(0)
source.onended = () => {
source.disconnect()
Expand Down
10 changes: 10 additions & 0 deletions app/src/ts/renderer/mishiro-live.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export default class extends Vue {
total: number = 0
current: number = 0
text: string = ''
playVolume: number = this.bgm.volume * 100
activeAudio: BGM | Live = {} as any
duration: number = 100
currentTime: number = 0
Expand Down Expand Up @@ -124,6 +125,12 @@ export default class extends Vue {
this.bgm.currentTime = Number(target.value)
}

onVolumeChange (event: Event): void {
const value = Number((event.target as HTMLInputElement).value)
if (Number.isNaN(value)) return
this.bgm.volume = value / 100
}

stopDownload (): void {
this.playSe(this.cancelSe)
this.current = 0
Expand Down Expand Up @@ -719,6 +726,9 @@ export default class extends Vue {

mounted (): void {
this.$nextTick(() => {
this.bgm.on('volumechange', () => {
this.playVolume = this.bgm.volume * 100
})
this.bgm.on('timeupdate', () => {
this.currentTime = this.bgm.currentTime
for (let i = this.allLyrics.length - 1; i >= 0; i--) {
Expand Down
7 changes: 6 additions & 1 deletion app/src/vue/view/MishiroLive.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<TaskLoading :total-loading="total" :current-loading="current" :text="text" :single="true" class="absolute-left" :color="'live'"/>
<div class="gray-bg absolute-right timebar">
<div class="display-prog-wrap">
<input class="volume-input" type="range" ref="playVolume" max="100" min="0" :value="playVolume" @input="onVolumeChange" :style="{ 'background-size': playVolume + '% 100%' }">
<input class="range-input" type="range" ref="playProg" :max="duration" min="0" :value="currentTime" @input="oninput($event.target)" :style="{ 'background-size': 100 * (currentTime / duration) + '% 100%' }">
<span class="left-time">{{Math.floor(currentTime) | time}} / {{Math.floor(duration) | time}}</span>
<button v-if="activeAudio && activeAudio.score" class="scorebtn" @click="startScore">{{$t('live.score')}}</button>
Expand Down Expand Up @@ -140,8 +141,12 @@
width: 100%;
align-items: center;
}
.display-prog-wrap .range-input {
.display-prog-wrap .volume-input {
flex: 1;
margin-right: 12px;
}
.display-prog-wrap .range-input {
flex: 3;
}
.display-prog-wrap .left-time {
width: 120px;
Expand Down

0 comments on commit 8079149

Please sign in to comment.