javascript - Trying to play an audiofile onClick in React.js

Question

I'm building a Todo list with some extra features built in. One of the features I'm trying to implement is when a todo item is marked 'completed' the item is crossed off and an audiofile of kids saying "yay" in unison will play. I have the audiofile in a folder marked "audioclips." I have my Todo.js file that I'm working in, in a folder named components. I don't believe the audio clip needs to be imported with the message that I'm using. I believe that I'm navigating the files right when declaring the src. I've tried console-logging the audio id and I get

Promise {<pending>}

Any ideas to correct my mistake? Or perhaps a better way to play the audio file onClick? Thanks!

const completeHandler = () => {
    setTodos(todos.map((item) => { 
        
        if(item.id === todo.id) { 
            console.log("COMPLETED")
            console.log(document.getElementById("audio").play())
            return { 
                ...item, completed: !item.completed  
            };
        }

        return item; 
    }))
}

return(
    <div className="todo">
        <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
            {text}
        </li>  
        <button onClick={completeHandler} className="complete-btn">
            <i className="fas fa-check"></i>
        </button>
        <audio id="audio">
            <source src="../audioclips/kidscheering.mp3"></source>
        </audio>
    </div>
);

}

question from:https://stackoverflow.com/questions/65851825/trying-to-play-an-audiofile-onclick-in-react-js

Answer 1

Waitting for answers