从字体真棒图标播放声音

Question

单击字体真棒图标时，我正在尝试播放声音。

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

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

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

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

我试过这篇文章 - 单击字体真棒图标时播放声音

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

ID 是唯一的。 您不能两次使用相同的 ID。 改用 class 或在每次迭代中使 ID 不同。

此外，如果正在使用相同的音频文件，那么您可以将其移出循环。 它只需要加载一次。

实际上将整个<script/>内容移出循环。 一遍又一遍地初始化相同的 function 是多余的。