make sounds great again

2 files changed, 17 insertions, 0 deletions

diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
index cba14f5f95..a0ffc4e0aa 100644
--- a/src/web/app/desktop/views/components/settings.vue
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -27,6 +27,13 @@
 		</section>
 
 		<section class="web" v-show="page == 'web'">
+			<h1>サウンド</h1>
+			<mk-switch v-model="enableSounds" text="サウンドを有効にする">
+				<span>投稿やメッセージを送受信したときなどにサウンドを再生します。この設定はブラウザに記憶されます。</span>
+			</mk-switch>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
 			<h1>モバイル</h1>
 			<mk-switch v-model="os.i.client_settings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
 		</section>
@@ -166,6 +173,7 @@ export default Vue.extend({
 			version,
 			latestVersion: undefined,
 			checkingForUpdate: false,
+			enableSounds: localStorage.getItem('enableSounds') == 'true',
 			lang: localStorage.getItem('lang') || '',
 			preventUpdate: localStorage.getItem('preventUpdate') == 'true',
 			debug: localStorage.getItem('debug') == 'true',
@@ -173,6 +181,9 @@ export default Vue.extend({
 		};
 	},
 	watch: {
+		enableSounds() {
+			localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
+		},
 		lang() {
 			localStorage.setItem('lang', this.lang);
 		},
diff --git a/src/web/app/desktop/views/components/timeline.vue b/src/web/app/desktop/views/components/timeline.vue
index 0d16d60df9..c35baa159e 100644
--- a/src/web/app/desktop/views/components/timeline.vue
+++ b/src/web/app/desktop/views/components/timeline.vue
@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { url } from '../../../config';
 
 export default Vue.extend({
 	data() {
@@ -93,6 +94,11 @@ export default Vue.extend({
 			});
 		},
 		onPost(post) {
+			// サウンドを再生する
+			if ((this as any).os.isEnableSounds) {
+				new Audio(`${url}/assets/post.mp3`).play();
+			}
+
 			this.posts.unshift(post);
 		},
 		onChangeFollowing() {