diff --git a/packages/backend/src/server/api/endpoints/i.ts b/packages/backend/src/server/api/endpoints/i.ts
index 475468dac3..4284670499 100644
--- a/packages/backend/src/server/api/endpoints/i.ts
+++ b/packages/backend/src/server/api/endpoints/i.ts
@@ -73,8 +73,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				this.userProfilesRepository.update({ userId: user.id }, {
 					loggedInDates: [...userProfile.loggedInDates, today],
 				});
-				this.usersRepository.update({ userId: user.id }, {
-					getPoints: userProfile.getPoints + todayGetPoints,
+				this.usersRepository.update( user.id, {
+					getPoints: user.getPoints + todayGetPoints,
 				});
 				this.notificationService.createNotification(user.id, 'loginbonus', {
 					loginbonus: todayGetPoints,
diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 5d2edf467e..c38754a371 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
+	:id="(audio.url).slice(32).replace('-','')"
 	ref="playerEl"
 	v-hotkey="keymap"
 	tabindex="0"
@@ -29,9 +30,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			preload="metadata"
 			controls
 			:class="$style.nativeAudio"
+			:src="audio.url"
 			@keydown.prevent
 		>
-			<source :src="audio.url">
 		</audio>
 	</div>
 
@@ -39,8 +40,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<audio
 			ref="audioEl"
 			preload="metadata"
+			:src="audio.url"
 		>
-			<source :src="audio.url">
 		</audio>
 		<div :class="[$style.controlsChild, $style.controlsLeft]">
 			<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
@@ -64,10 +65,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:class="$style.volumeSeekbar"
 			/>
 		</div>
+		{{ audioEl }}
+		<WaveSurferPlayer
+			:class="$style.seekbarRoot"
+			:options="{ media: audioEl,
+				height: 32,
+				waveColor: 'gray',
+				progressColor: 'red',
+				barGap: 5,
+				barWidth: 5,
+				barRadius: 8,
+				duration: 80,
+				backend: 'WebAudio'
+			}"
+		></WaveSurferPlayer>
 		<MkMediaRange
+			v-if="defaultStore.state.dataSaver.media && !hide"
 			v-model="rangePercent"
 			:class="$style.seekbarRoot"
-			:buffer="bufferedDataRatio"
 		/>
 	</div>
 </div>
@@ -76,6 +91,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
+import { WaveSurferPlayer } from '@meersagor/wavesurfer-vue';
+import type WaveSurfer from 'wavesurfer.js';
 import type { MenuItem } from '@/types/menu.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
@@ -84,7 +101,6 @@ import bytes from '@/filters/bytes.js';
 import { hms } from '@/filters/hms.js';
 import MkMediaRange from '@/components/MkMediaRange.vue';
 import { $i, iAmModerator } from '@/account.js';
-
 const props = defineProps<{
 	audio: Misskey.entities.DriveFile;
 }>();
@@ -132,6 +148,8 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.data
 // Menu
 const menuShowing = ref(false);
 
+const waveSuferOptions = ref();
+
 function showMenu(ev: MouseEvent) {
 	let menu: MenuItem[] = [];
 
@@ -226,10 +244,7 @@ const volume = ref(.25);
 const speed = ref(1);
 const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える
 const bufferedEnd = ref(0);
-const bufferedDataRatio = computed(() => {
-	if (!audioEl.value) return 0;
-	return bufferedEnd.value / audioEl.value.duration;
-});
+let audioContext = new AudioContext();
 
 // MediaControl Events
 function togglePlayPause() {
@@ -325,7 +340,7 @@ watch(loop, (to) => {
 	if (audioEl.value) audioEl.value.loop = to;
 });
 
-onMounted(() => {
+onMounted(async () => {
 	init();
 });