In my Django project, I am dynamically rendering cards populated with data from a database. This works as expected.
In each card, I need to render a vue-audio-mixer control, but each instance of the mixer must have it's own configuration script.
Firstly, I tried this: <script src="{{ movements.script_source }}" but this is wrong.
Then, I tried the following code but it does not work either. Any help would be appreciated, thanks.
<script>
var url = "{{ movement.script_source }}";
var script = document.createElement("script");
script.src = url
document.body.appendChild(script);
</script>
Here is the code to render the cards:
{% for movement in piece.movement_set.all %}
<div class="card my-3 p-3 rounded " style="width: 23rem;">
<header class="card-header text-center text-white bg-success">
{{ movement.title }}
</header>
<div class="card-body">
<ul>
<li class="list__item">Instrumentation: {{ piece.instrumentation }}</li>
<li class="list__item">Description: {{ piece.description }}</li>
<li class="list__item">Performance notes</li>
<li class="list__item">Score</li>
</ul>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="{{ movement.audio_file }}" data-target="#myModal">
Play Audio
</button>
</div>
</div>
{% endfor %}
Clicking the "Play Audio" button opens a modal dialog displaying an instance of the vue-audio-mixer. Each instance of the mixer must point to its own configuration script as each card represents a separate movement (section) of a piece of music. The users will download the sheet music, then use the audio mixer to mute individual channels and then play the music of the muted channel.