Improve sound

locales/ja-JP.yml

@@ -437,6 +437,7 @@ _sfx:
   notification: "通知"
   chat: "チャット"
   chatBg: "チャット(バックグラウンド)"
+  antenna: "アンテナ受信"
 
 _ago:
   unknown: "謎"

src/client/app.vue

@@ -565,9 +565,7 @@ export default Vue.extend({
 				});
 			}
 
-			const audio = new Audio(`/assets/sounds/${this.$store.state.device.sfxNotification}.mp3`);
+			this.$root.sound('notification');
-			audio.volume = this.$store.state.device.sfxVolume;
-			audio.play();
 		},
 
 		onMousedown(e) {

src/client/components/timeline.vue

@@ -53,11 +53,7 @@ export default Vue.extend({
 			(this.$refs.tl as any).prepend(note);
 
 			if (this.sound) {
-				const audio = new Audio(note.userId === this.$store.state.i.id
+				this.$root.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
-					? `/assets/sounds/${this.$store.state.device.sfxNoteMy}.mp3`
-					: `/assets/sounds/${this.$store.state.device.sfxNote}.mp3`);
-				audio.volume = this.$store.state.device.sfxVolume;
-				audio.play();
 			}
 		};
 

src/client/init.ts

@@ -189,6 +189,13 @@ os.init(async () => {
 				if (cb) vm.$once('closed', cb);
 				(vm as any).focus();
 			},
+			sound(type: string) {
+				const sound = this.$store.state.device['sfx' + type.substr(0, 1).toUpperCase() + type.substr(1)];
+				if (sound == null) return;
+				const audio = new Audio(`/assets/sounds/${sound}.mp3`);
+				audio.volume = this.$store.state.device.sfxVolume;
+				audio.play();
+			}
 		},
 		router: router,
 		render: createEl => createEl(App)
@@ -198,4 +205,96 @@ os.init(async () => {
 
 	// マウント
 	app.$mount('#app');
+
+	if (app.$store.getters.isSignedIn) {
+		const main = os.stream.useSharedConnection('main');
+
+		// 自分の情報が更新されたとき
+		main.on('meUpdated', i => {
+			app.$store.dispatch('mergeMe', i);
+		});
+
+		main.on('readAllNotifications', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadNotification: false
+			});
+		});
+
+		main.on('unreadNotification', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadNotification: true
+			});
+		});
+
+		main.on('unreadMention', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadMentions: true
+			});
+		});
+
+		main.on('readAllUnreadMentions', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadMentions: false
+			});
+		});
+
+		main.on('unreadSpecifiedNote', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadSpecifiedNotes: true
+			});
+		});
+
+		main.on('readAllUnreadSpecifiedNotes', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadSpecifiedNotes: false
+			});
+		});
+
+		main.on('readAllMessagingMessages', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadMessagingMessage: false
+			});
+		});
+
+		main.on('unreadMessagingMessage', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadMessagingMessage: true
+			});
+
+			app.sound('chatBg');
+		});
+
+		main.on('readAllAntennas', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadAntenna: false
+			});
+		});
+
+		main.on('unreadAntenna', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadAntenna: true
+			});
+
+			app.sound('antenna');
+		});
+
+		main.on('readAllAnnouncements', () => {
+			app.$store.dispatch('mergeMe', {
+				hasUnreadAnnouncement: false
+			});
+		});
+
+		main.on('clientSettingUpdated', x => {
+			app.$store.commit('settings/set', {
+				key: x.key,
+				value: x.value
+			});
+		});
+
+		// トークンが再生成されたとき
+		// このままではMisskeyが利用できないので強制的にサインアウトさせる
+		main.on('myTokenRegenerated', () => {
+			os.signout();
+		});
+	}
 });

src/client/mios.ts

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import { EventEmitter } from 'eventemitter3';
 
 import initStore from './store';
-import { apiUrl, version, locale } from './config';
+import { apiUrl, version } from './config';
 import Progress from './scripts/loading';
 
 import Stream from './scripts/stream';
@@ -142,98 +142,6 @@ export default class MiOS extends EventEmitter {
 	@autobind
 	private initStream() {
 		this.stream = new Stream(this);
-
-		if (this.store.getters.isSignedIn) {
-			const main = this.stream.useSharedConnection('main');
-
-			// 自分の情報が更新されたとき
-			main.on('meUpdated', i => {
-				this.store.dispatch('mergeMe', i);
-			});
-
-			main.on('readAllNotifications', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadNotification: false
-				});
-			});
-
-			main.on('unreadNotification', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadNotification: true
-				});
-			});
-
-			main.on('unreadMention', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadMentions: true
-				});
-			});
-
-			main.on('readAllUnreadMentions', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadMentions: false
-				});
-			});
-
-			main.on('unreadSpecifiedNote', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadSpecifiedNotes: true
-				});
-			});
-
-			main.on('readAllUnreadSpecifiedNotes', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadSpecifiedNotes: false
-				});
-			});
-
-			main.on('readAllMessagingMessages', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadMessagingMessage: false
-				});
-			});
-
-			main.on('unreadMessagingMessage', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadMessagingMessage: true
-				});
-
-				const audio = new Audio(`/assets/sounds/${this.store.state.device.sfxChatBg}.mp3`);
-				audio.volume = this.store.state.device.sfxVolume;
-				audio.play();
-			});
-
-			main.on('readAllAntennas', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadAntenna: false
-				});
-			});
-
-			main.on('unreadAntenna', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadAntenna: true
-				});
-			});
-
-			main.on('readAllAnnouncements', () => {
-				this.store.dispatch('mergeMe', {
-					hasUnreadAnnouncement: false
-				});
-			});
-
-			main.on('clientSettingUpdated', x => {
-				this.store.commit('settings/set', {
-					key: x.key,
-					value: x.value
-				});
-			});
-
-			// トークンが再生成されたとき
-			// このままではMisskeyが利用できないので強制的にサインアウトさせる
-			main.on('myTokenRegenerated', () => {
-				this.signout();
-			});
-		}
 	}
 
 	/**

src/client/pages/messaging-room.vue

@@ -184,10 +184,7 @@ export default Vue.extend({
 		},
 
 		onMessage(message) {
-			// サウンドを再生する
+			this.$root.sound('chat');
-			const audio = new Audio(`/assets/sounds/${this.$store.state.device.sfxChat}.mp3`);
-			audio.volume = this.$store.state.device.sfxVolume;
-			audio.play();
 
 			const isBottom = this.isBottom();
 

src/client/pages/preferences/index.vue

@@ -37,6 +37,11 @@
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxChatBg)" v-if="sfxChatBg"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
+			<mk-select v-model="sfxAntenna">
+				<template #label>{{ $t('_sfx.antenna') }}</template>
+				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
+				<template #text><button class="_textButton" @click="listen(sfxAntenna)" v-if="sfxAntenna"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
+			</mk-select>
 		</div>
 	</section>
 
@@ -97,6 +102,8 @@ const sounds = [
 	'syuilo/pope1',
 	'syuilo/pope2',
 	'syuilo/waon',
+	'syuilo/popo',
+	'syuilo/triple',
 	'aisha/1',
 	'aisha/2',
 	'aisha/3',
@@ -196,6 +203,11 @@ export default Vue.extend({
 			get() { return this.$store.state.device.sfxChatBg; },
 			set(value) { this.$store.commit('device/set', { key: 'sfxChatBg', value }); }
 		},
+
+		sfxAntenna: {
+			get() { return this.$store.state.device.sfxAntenna; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxAntenna', value }); }
+		},
 	},
 
 	watch: {

src/client/store.ts

@@ -47,6 +47,7 @@ const defaultDeviceSettings = {
 	sfxNotification: 'syuilo/pope2',
 	sfxChat: 'syuilo/pope1',
 	sfxChatBg: 'syuilo/waon',
+	sfxAntenna: 'syuilo/triple',
 	userData: {},
 };