Revert "feat(frontend): Audio player で波形を表示するように (MisskeyIO#827)"

This reverts commit c0dc9cd.

Author: Ruruke

packages/frontend/package.json

@@ -72,10 +72,8 @@
 		"uuid": "10.0.0",
 		"v-code-diff": "1.13.1",
 		"vite": "5.4.11",
-		"vue": "3.5.13",
-		"vue-gtag": "2.0.1",
-		"vuedraggable": "next",
-		"webgl-audiovisualizer": "github:tar-bin/webgl-audiovisualizer"
+		"vue": "3.5.12",
+		"vuedraggable": "next"
 	},
 	"devDependencies": {
 		"@misskey-dev/summaly": "5.1.0",
@@ -106,7 +104,6 @@
 		"@types/punycode": "2.1.4",
 		"@types/sanitize-html": "2.13.0",
 		"@types/seedrandom": "3.0.8",
-		"@types/three": "0.170.0",
 		"@types/throttle-debounce": "5.0.2",
 		"@types/tinycolor2": "1.4.6",
 		"@types/uuid": "10.0.0",

packages/frontend/src/components/MkAudioVisualizer.vue

@@ -74,11 +74,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i v-else class="ti ti-volume"></i>
 			</button>
 			<MkMediaRange
-				v-model="rangePercent"
-				:class="$style.seekbarRoot"
-				:buffer="bufferedDataRatio"
+				v-model="volume"
+				:class="$style.volumeSeekbar"
 			/>
 		</div>
+		<MkMediaRange
+			v-model="rangePercent"
+			:class="$style.seekbarRoot"
+			:buffer="bufferedDataRatio"
+		/>
 	</div>
 </div>
 </template>
@@ -93,13 +97,11 @@ import * as os from '@/os.js';
 import { type Keymap } from '@/scripts/hotkey.js';
 import bytes from '@/filters/bytes.js';
 import { hms } from '@/filters/hms.js';
-import MkAudioVisualizer from '@/components/MkAudioVisualizer.vue';
 import MkMediaRange from '@/components/MkMediaRange.vue';
 import { $i, iAmModerator } from '@/account.js';
 
 const props = defineProps<{
 	audio: Misskey.entities.DriveFile;
-	user?: Misskey.entities.UserLite;
 }>();
 
 const keymap = {
@@ -150,7 +152,6 @@ function hasFocus() {
 
 const playerEl = shallowRef<HTMLDivElement>();
 const audioEl = shallowRef<HTMLAudioElement>();
-const audioVisualizer = ref<InstanceType<typeof MkAudioVisualizer>>();
 
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore'));
@@ -249,11 +250,6 @@ const isPlaying = ref(false);
 const isActuallyPlaying = ref(false);
 const elapsedTimeMs = ref(0);
 const durationMs = ref(0);
-const audioContext = ref<AudioContext | null>(null);
-const sourceNode = ref<MediaElementAudioSourceNode | null>(null);
-const gainNode = ref<GainNode | null>(null);
-const analyserGainNode = ref<GainNode | null>(null);
-const analyserNode = ref<AnalyserNode | null>(null);
 const rangePercent = computed({
 	get: () => {
 		return (elapsedTimeMs.value / durationMs.value) || 0;
@@ -276,33 +272,11 @@ const bufferedDataRatio = computed(() => {
 function togglePlayPause() {
 	if (!isReady.value || !audioEl.value) return;
 
-	if (!sourceNode.value) {
-		audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
-		sourceNode.value = audioContext.value.createMediaElementSource(audioEl.value);
-
-		analyserGainNode.value = audioContext.value.createGain();
-		gainNode.value = audioContext.value.createGain();
-		analyserNode.value = audioContext.value.createAnalyser();
-
-		sourceNode.value.connect(analyserGainNode.value);
-		analyserGainNode.value.connect(analyserNode.value);
-		analyserNode.value.connect(gainNode.value);
-		gainNode.value.connect(audioContext.value.destination);
-
-		analyserNode.value.fftSize = 2048;
-
-		analyserGainNode.value.gain.setValueAtTime(0.8, audioContext.value.currentTime);
-
-		gainNode.value.gain.setValueAtTime(volume.value, audioContext.value.currentTime);
-	}
-
 	if (isPlaying.value) {
 		audioEl.value.pause();
-		audioVisualizer.value?.pauseAnimation();
 		isPlaying.value = false;
 	} else {
 		audioEl.value.play();
-		audioVisualizer.value?.resumeAnimation();
 		isPlaying.value = true;
 		oncePlayed.value = true;
 	}
@@ -360,7 +334,6 @@ function init() {
 				oncePlayed.value = false;
 				isActuallyPlaying.value = false;
 				isPlaying.value = false;
-				audioVisualizer.value?.pauseAnimation();
 			});
 
 			durationMs.value = audioEl.value.duration * 1000;
@@ -369,15 +342,16 @@ function init() {
 					durationMs.value = audioEl.value.duration * 1000;
 				}
 			});
-			gainNode.value?.gain.setValueAtTime(volume.value, audioContext.value?.currentTime);
+
+			audioEl.value.volume = volume.value;
 		}
 	}, {
 		immediate: true,
 	});
 }
 
 watch(volume, (to) => {
-	if (audioEl.value) gainNode.value?.gain.setValueAtTime(to, audioContext.value?.currentTime);
+	if (audioEl.value) audioEl.value.volume = to;
 });
 
 watch(speed, (to) => {

packages/frontend/src/components/MkMediaAudio.vue

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="showHiddenContent">
+	<MkMediaAudio v-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media"/>
+	<div v-else-if="media.isSensitive && hide" :class="$style.sensitive" @click="show">
 		<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
 		<b>{{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
-	<MkMediaAudio v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media" :user="user"/>
 	<a
 		v-else :class="$style.download"
 		:href="media.url"
@@ -31,11 +31,9 @@ import { defaultStore } from '@/store.js';
 import * as os from '@/os.js';
 import MkMediaAudio from '@/components/MkMediaAudio.vue';
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
 	media: Misskey.entities.DriveFile;
-	user?: Misskey.entities.UserLite;
-}>(), {
-});
+}>();
 
 const hide = ref(true);