为什么js脚本在django网站上不起作用？

Question

我是Django和JS的新手。尝试使用自定义控件创建HTML5音频播放器。当我开始页面时，什么也没发生。

使用默认播放器测试了此mp3，一切正常。所以我认为静态设置是正确的。

文件夹结构：

..stream (the app)
....static
......stream
........audio
..........test.mp3
........scripts
..........player.js
....templates
......index.html

这是我的index.html。基本模板几乎为空。

{% extends "base_generic.html" %}

{% block content %}
    {% load static %}
    <script src="{% static "stream/scripts/player.js" %}" type="text/javascript"></script>
    <audio src="{% static "stream/audio/test.mp3" %}" type="audio/mpeg">
{% endblock %}

这是我的player.js

var aud = $('audio')[0];
aud.play();

我希望当我打开页面时，音乐会开始播放。

Answer 1

问题来自JS脚本执行。 浏览器执行时

var aud = $('audio')[0];
aud.play();

或

document.getElementsByTagName('audio')[0].play();

尚未创建音频块，因此查询无法找到任何内容，并且出现错误

  

未捕获的TypeError：无法读取未定义的属性“ play”

您可以使用以下功能延迟执行：

document.addEventListener('DOMContentLoaded', function(){
    var aud = document.getElementsByTagName('audio')[0];
    aud.play();
}, false);