I attempted to implement the audio tag using a variable, but it was not functioning properly. Any assistance would be greatly appreciated.
The following code is within the script tag:
<script setup>
import { ref } from 'vue'
import data from '../../../data/game3/data2.json'
const music = ref(data.categories[0].units[0].items[0].pronunciation)
console.log(music.value) //when log it show ../../assets/pronunciation/apple.mp3 which is the right path
</script>
And this code is within the template tag:
<template>
<div>
{{ music }}
<audio controls>
<source :src="music" type="audio/mp3" />
</audio>
<audio controls>
<source src="../../assets/pronunciation/apple.mp3" type="audio/mp3" />
</audio>
</div>
The first version does not seem to be working correctly. Could someone please offer some guidance? (I have already tested in multiple browsers with the same result.)
This is the error displayed by the browser: https://i.sstatic.net/6XA1G.png