-1

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 ..

Ahmed Khaled El-Dakhly
  • 3
  • 4
  • Pretty sure that the `@` in `@/data/mp3/` references a location alias that your build tool can resolve, but not the browser. If you replace it with the URL to the folder, does it change anything? – Moritz Ringler Feb 16 '23 at 10:55
  • unfortunatly, no .. i tried using "src/data" and "../data" and al posibbes. – Ahmed Khaled El-Dakhly Feb 16 '23 at 11:23
  • I would assume the webserver does not serve files from src, but from a public or dist folder. Have you checked that the expected URL actually gives you back a file? – Moritz Ringler Feb 16 '23 at 11:37
  • sure i tested .. any suggested solutions else ? – Ahmed Khaled El-Dakhly Feb 16 '23 at 11:39
  • Can you provide in your answer a working URL for a file, the content of `surah.source` for that file and the folder structure of your project? – Moritz Ringler Feb 16 '23 at 12:00
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Feb 16 '23 at 18:54

1 Answers1

0
  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',
     },
    }
  }
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Tarik
  • 161
  • 4
  • surah is api json file : "Yunus": { "name": "يونس", "Number": 10, "Number of Verses": 109, "Makki/Madani": "مكية", "Theme": "قصص الأنبياء", "source": "010.mp3" } – Ahmed Khaled El-Dakhly Feb 16 '23 at 12:21
  • Thank u for more info, So u can replace surah object in the data method with the API response that u are receiving; This way, u can dynamically update the surah object with the data from the API. – Tarik Feb 16 '23 at 13:34