diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index 08edb03d9..9c367df4e 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -45,6 +45,7 @@ import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
+import * as sound from "@/scripts/sound.js";
 
 const props = defineProps<{
 	note: Note;
@@ -52,6 +53,7 @@ const props = defineProps<{
 
 function star(ev?: MouseEvent): void {
 	pleaseLogin();
+	sound.play("reaction");
 	os.api("notes/reactions/create", {
 		noteId: props.note.id,
 		reaction:
diff --git a/packages/client/src/components/MkStarButtonNoEmoji.vue b/packages/client/src/components/MkStarButtonNoEmoji.vue
index 727e65ef8..e8f671df5 100644
--- a/packages/client/src/components/MkStarButtonNoEmoji.vue
+++ b/packages/client/src/components/MkStarButtonNoEmoji.vue
@@ -51,6 +51,7 @@ import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import { useTooltip } from "@/scripts/use-tooltip";
+import * as sound from "@/scripts/sound.js";
 
 const props = defineProps<{
 	note: Note;
@@ -63,6 +64,7 @@ const buttonRef = ref<HTMLElement>();
 function toggleStar(ev?: MouseEvent): void {
 	pleaseLogin();
 	if (!props.reacted) {
+		sound.play("reaction");
 		os.api("notes/reactions/create", {
 			noteId: props.note.id,
 			reaction: instance.defaultReaction,
@@ -75,7 +77,6 @@ function toggleStar(ev?: MouseEvent): void {
 			const x = rect.left + el.offsetWidth / 2;
 			const y = rect.top + el.offsetHeight / 2;
 			os.popup(Ripple, { x, y }, {}, "end");
-			sound.play("reaction");
 		}
 	} else {
 		os.api("notes/reactions/delete", {