Play sound from a font awesome icon

I am trying to play a sound when a font awesome icon is clicked.

I have a page where a list of posts are pulled from a database and I am using jinja to display them all. Each post will have an icon that can be clicked and the contents of that post will be read out.

This works if I just have an audio control but I would rather have a small icon instead of the entire audio control.

My issue is that when I add in the code to make it an icon, it only ever seems to run the 'src' of the first result in the for loop. I have inspected the page to check what each of the icons 'srcs' are and they are all different and correct but clicking the icon outputs the wrong audio.

I think it is something to do with the onclick event having an ID and the ID is always set to the first element in my forloop.

I tried this post - Play Sound when Font Awesome Icon is Clicked


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

                    var audio = document.getElementById("content");

                    function playContent() {

    {% endfor %}

{% endblock content %}

1 answer

  • answered 2021-11-23 02:15 JP_

    Try something like this:

    {% for post in posts %}
        <audio id="audio_{{post.ttsFileName}}">
            <source src="{{post.ttsFileName}}" type="audio/mp3">
        <i onclick="document.getElementById('audio_{{post.ttsFileName}}').play()"></i>
    {% endfor %}

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum