當單擊字體真棒圖示時，我試圖播放聲音。
我有一個頁面，從資料庫中提取了一個帖子串列，我正在使用 jinja 來顯示它們。每篇文章都有一個可以點擊的圖示，該文章的內容將被讀出。
如果我只有一個音頻控制元件，但我寧愿有一個小圖示而不是整個音頻控制元件，這會起作用。
我的問題是，當我添加代碼使其成為圖示時，它似乎只運行 for 回圈中第一個結果的“src”。我檢查了頁面以檢查每個圖示 'srcs' 是什么，它們都不同且正確，但單擊圖示會輸出錯誤的音頻。
我認為這與具有 ID 的 onclick 事件有關，并且該 ID 始終設定為我的 forloop 中的第一個元素。
我嘗試了這篇文章 -單擊 Font Awesome 圖示時播放聲音
HTML
{% extends "layout.html" %}
{% block content %}
<!--Using Jinja2 to get run code in HTML-->
<legend class="border-bottom mb-4">All Posts</legend>
{% for post in posts %}
<article class="media content-section">
<div>
<i class="fas fa-volume-up" onclick="playContent()" style="color: blue;"></i>
<audio id="content">
<source src="link-to-blob-storage/{{ post.ttsFileName }}" type="audio/mp3">
</audio>
<script>
var audio = document.getElementById("content");
function playContent() {
audio.play();
}
</script>
</div>
</article>
{% endfor %}
{% endblock content %}
uj5u.com熱心網友回復：
嘗試這樣的事情：
{% for post in posts %}
<audio id="audio_{{post.ttsFileName}}">
<source src="{{post.ttsFileName}}" type="audio/mp3">
</audio>
<i onclick="document.getElementById('audio_{{post.ttsFileName}}').play()"></i>
{% endfor %}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363775.html