update

packages/frontend/package.json

@@ -20,6 +20,7 @@
 		"@discordapp/twemoji": "15.0.3",
 		"@github/webauthn-json": "2.1.1",
 		"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
+		"@meersagor/wavesurfer-vue": "^0.1.0",
 		"@misskey-dev/browser-image-resizer": "2024.1.0",
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/plugin-replace": "5.0.5",
@@ -73,7 +74,8 @@
 		"v-code-diff": "1.11.0",
 		"vite": "5.2.11",
 		"vue": "3.4.26",
-		"vuedraggable": "next"
+		"vuedraggable": "next",
+		"wavesurfer.js": "^7.7.14"
 	},
 	"devDependencies": {
 		"@misskey-dev/eslint-plugin": "1.0.0",

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,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:class="$style.volumeSeekbar"
 			/>
 		</div>
+
+		<WaveSurferPlayer
+			v-if="!defaultStore.state.dataSaver.media && audioEl"
+			:class="$style.seekbarRoot"
+			:options="{ media: audioEl,
+				height: 32,
+				waveColor: 'gray',
+				progressColor: accent,
+				barGap: 3,
+				barWidth: 3,
+				barRadius: 5,
+				duration: 80,
+				cursorWidth: 0,
+			}"
+		></WaveSurferPlayer>
 		<MkMediaRange
+			v-if="defaultStore.state.dataSaver.media && !hide"
 			v-model="rangePercent"
 			:class="$style.seekbarRoot"
-			:buffer="bufferedDataRatio"
 		/>
 	</div>
 </div>
@@ -76,6 +92,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 tinycolor from 'tinycolor2';
 import type { MenuItem } from '@/types/menu.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
@@ -84,11 +102,9 @@ 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;
 }>();
-
 const keymap = {
 	'up': () => {
 		if (hasFocus() && audioEl.value) {
@@ -131,6 +147,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.data
 
 // Menu
 const menuShowing = ref(false);
+const accent = ref();
 
 function showMenu(ev: MouseEvent) {
 	let menu: MenuItem[] = [];
@@ -226,10 +243,6 @@ 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;
-});
 
 // MediaControl Events
 function togglePlayPause() {
@@ -325,7 +338,9 @@ watch(loop, (to) => {
 	if (audioEl.value) audioEl.value.loop = to;
 });
 
-onMounted(() => {
+onMounted(async () => {
+	accent.value = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+
 	init();
 });