lesson 7

docs/.vitepress/theme/components/AudioButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <span>
+    <button type="button" @click="playAudio()">▶️</button>
+    <audio ref="audio" style="display: none"></audio>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+const props = defineProps<{
+  src: string;
+}>();
+
+const audioEl = useTemplateRef("audio");
+
+function playAudio() {
+  if (!audioEl.value) return;
+  audioEl.value.src = props.src;
+  audioEl.value.play();
+}
+</script>
+
+<style module></style>