从字体真棒图标播放声音

Question

我正在尝试在单击超赞字体图标时播放声音。

我有一个页面，其中 post 的列表是从数据库中提取的，我正在使用 jinja 来显示它们。每个 post 都有一个图标，可以单击该图标并读出 post 的内容。

如果我只有一个音频控件，这是可行的，但我宁愿有一个小图标，而不是整个音频控件。

我的问题是，当我添加代码使其成为图标时，它似乎只运行 for 循环中第一个结果的 'src'。我检查了页面以检查每个图标 'srcs' 是什么，它们都不同且正确，但单击图标输出错误的音频。

我认为这与具有 ID 的 onclick 事件有关，并且 ID 始终设置为我的 forloop 中的第一个元素。

我试过了 post - Play Sound when Font Awesome Icon is Clicked

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 %}

Answer 1

尝试这样的事情：

{% 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 %}

从字体真棒图标播放声音

Play sound from a font awesome icon

html

python

jquery

jinja2

flask