part9

Author: kosinw

app/index.jsx

@@ -1,7 +1,8 @@
 import { View, ScrollView, StyleSheet, FlatList } from "react-native";
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Accelerometer } from "expo-sensors";
+import { Audio } from "expo-av";
 
 import DicePicker from "@/components/DicePicker";
 import DiceList from "@/components/DiceList";
@@ -14,8 +15,14 @@ export default function Index() {
   const [key, setKey] = useState(0);
   const [rolling, setRolling] = useState(false);
   const [isModalVisible, setModalVisible] = useState(false);
+  const rollSfx = useRef(null);
+
+  const rollDice = async () => {
+    if (rollSfx.current) {
+      await rollSfx.current.sound.setPositionAsync(0);
+      await rollSfx.current.sound.playAsync();
+    }
 
-  const rollDice = () => {
     setDice(dice => dice.map((die) => {
       let faceValue = Math.random();
 
@@ -38,6 +45,12 @@ export default function Index() {
     setTimeout(() => { setRolling(false); }, 1000);
   }
 
+  const loadAudio = async () => {
+    rollSfx.current = await Audio.Sound.createAsync(
+      require("@/assets/audio/dice_roll.wav")
+    );
+  }
+
   useEffect(() => {
     let lastRollTime = Date.now();
 
@@ -49,7 +62,13 @@ export default function Index() {
       }
     });
 
-    return () => accel.remove();
+    loadAudio();
+
+    return () => {
+      if (rollSfx.current)
+        rollSfx.current.sound.unloadAsync();
+      accel.remove();
+    }
   }, []);
 
   const onAddDice = () => {

assets/audio/dice_roll.wav

@@ -25,6 +25,7 @@
     "expo-haptics": "~14.0.1",
     "expo-linking": "~7.0.5",
     "expo-router": "~4.0.17",
+    "expo-sensors": "~14.0.2",
     "expo-splash-screen": "~0.29.22",
     "expo-status-bar": "~2.0.1",
     "expo-symbols": "~0.2.2",
@@ -41,7 +42,7 @@
     "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5",
-    "expo-sensors": "~14.0.2"
+    "expo-av": "~15.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",