Bind "src" attiribute in audio tag within vue code

Question

try to bind src of audio tag invue code bur does not work .. Note that object (surah) is api json object .. this is my code :

<audio controls class="audio">
<source :src="'@/data/mp3/' + surah.source" type="audio/mpeg">
<p>عفوًا متصفحك لا يدعم تشغيل الأصوات، قم بتحديثه أو استخدم متصفح آخر.</p>
</audio>

rest of code work will (use api) except for this ..

Answer 1

1. Make sure the surah object is available in component's data
2. Make sure if the mp3 files are stored in a data/mp3 folder
3. Make sure the source property of surah object is a valid string that represents the name of mp3 file (Ex: file_audio.mp3)
4. Try this example:

Template:

 <audio controls class="audio">
     <source :src="`@/data/mp3/${surah.source}`" type="audio/mpeg">
     <p>عفوًا متصفحك لا يدعم تشغيل الأصوات، قم بتحديثه أو استخدم متصفح آخر.</p>
 </audio>

Script:

export default {
  data() {
    return {
     surah: {
      name: 'يونس',
      Number: 10,
      'Number of Verses': 109,
      'Makki/Madani': 'مكية',
      Theme: 'قصص الأنبياء',
      source: '010.mp3',
     },
    }
  }
}