绑定 Vue 代码中的音频标签中的 “src” 属性。

huangapple go评论56阅读模式
英文:

Bind "src" attiribute in audio tag within vue code

问题

尝试绑定音频标签的 src 属性在 Vue 代码中,但不起作用..
请注意,对象 (surah) 是 API 返回的 JSON 对象..
这是我的代码 :

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

其余的代码可以正常工作(使用 API),只有这部分有问题..

英文:

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 :

&lt;audio controls class=&quot;audio&quot;&gt;
&lt;source :src=&quot;&#39;@/data/mp3/&#39; + surah.source&quot; type=&quot;audio/mpeg&quot;&gt;
&lt;p&gt;عفوًا متصفحك لا يدعم تشغيل الأصوات، قم بتحديثه أو استخدم متصفح آخر.&lt;/p&gt;
&lt;/audio&gt;

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

答案1

得分: 0

1. 确保 surah 对象在组件的数据中可用。
2. 确保 mp3 文件存储在 data/mp3 文件夹中。
3. 确保 surah 对象的 source 属性是一个有效的字符串,表示 mp3 文件的名称(例如:file_audio.mp3)。
4. 尝试以下示例:

模板:

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

脚本:

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

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

Script:

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

huangapple
  • 本文由 发表于 2023年2月16日 18:46:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/75471135.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定