Javascript和Django'；静态'；模板标签

我已经建立了一个wee站点来播放一些声音，我的

视图会转发这些声音的列表。我将直接进入代码：

var sounds = "{{js_sounds|escapejs}}";
sounds = JSON.parse(sounds);
var howls = {};

sounds.forEach(function(sound){
    howls[sound] = new Howl({
        src: ["{% static 'audio/"+sound+".mp3' %}"]
    });

    $(document).on('click', '#'+sound+'_btn_play', function(){
        howls[sound].play();
    });
    $(document).on('click', '#'+sound+'_btn_stop', function(){
        howls[sound].stop();
    });
}

这不是最整洁的解决方案——html模板还创建了一系列按钮和播放声音的东西，我的Javascript在那些点击功能中引用了这些按钮和东西。我还使用Javascript Howler库来简化声音的播放

现在，当我在本地测试它时，它工作得非常好，但是在我部署之后，
src:[“{%static”audio/“+sound+”.mp3%}”]
行中出现了一个问题。这看起来执行起来很奇怪，因为它不是将声音插入Django标记并作为一个字符串执行，而是作为：
src:[“{%static”audio/%22%2Bsound%2B%22.mp3%}”]
，即尝试将
“+
作为字符串的一部分进行解析

我正在努力弄清楚为什么它在部署时会这样做，而不是在本地。此外，关于如何使这个过程更好的任何反馈（可能没有在Javascript中使用模板标记，这感觉不太对）非常感谢，但实际上我只是在寻找任何方法将此
声音
值传递给Javascript中的标记。
Django标记由服务器评估，而Javascript由客户端浏览器评估。因此，
静态
标记为e时，
声音
变量尚未确定执行

您可以采取的一种方法是使用Django模板for loop迭代
声音
，并将每个静态引用存储在JSON字典中。然后您的javascript可以从中查找所需的值：

var my_references = {
{% for sound in sounds %}
    "{{ sound }}":"{% static 'audio/"+sound+".mp3' %}",
{% endfor %}
};

...

src: [my_references[sound]]