Why doesn't js script work at django web-site?

Question

I'm new in Django and JS. Trying to create HTML5 audioplayer with custom controls. When I start page nothing happens.

Tested this mp3 with default player and everything is ok. So I think static settings is correct.

Folder structure:

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

This is my index.html. The base template is almost empty.

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

And this is my player.js

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

I expect that when I open the page, the music would start playing.

Could you try with this player.js instead ? document.getElementsByTagName('audio')[0].play(); — PRMoureu
– PRMoureu, Commented Jul 13, 2019 at 17:05
Now if you load jQuery in base_generic.html, the problem is more to delay the execution of the function when the page is ready, otherwise the query by tag name won't find anything (another issue will be browsers options : many browsers block automatic sounds) — PRMoureu
– PRMoureu, Commented Jul 13, 2019 at 17:23
@PRMoureu, unfortunately nothing. As I understand jQuery is a framefork. Can I write code with pure JS or I shoud use fameworks anyways? — Pavel Antspovich
– Pavel Antspovich, Commented Jul 14, 2019 at 8:41
If you check the source code generated, do you see the audio and JS script blocks ? or any error in the console ? — PRMoureu
– PRMoureu, Commented Jul 14, 2019 at 8:43
@PRMoureu, there aren't any troubles in console. This in a source <!DOCTYPE html> <html lang="en"> <head> </head> <body> <h1>Stream</h1> <script src="/static/stream/scripts/player.js" type="text/javascript"></script> <audio src="/static/stream/audio/test.mp3" type="audio/mpeg"> </body> </html> — Pavel Antspovich
– Pavel Antspovich, Commented Jul 14, 2019 at 8:49

PRMoureu · Accepted Answer · 2019-07-14 09:08:02Z

1

The issue comes from the JS script execution. At the time the browser executes

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

or

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

the audio block is not created yet, so the query cannot find anything and you get the error

Uncaught TypeError: Cannot read property 'play' of undefined

You can delay the execution with the following function :

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

answered Jul 14, 2019 at 9:08

PRMoureu

13.4k6 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PRMoureu Over a year ago

You're welcome, btw the $ expression $('audio')[0]; refers to jQuery (in many cases). Be careful if you look at solutions involving it, you have to include jQuery sources or find the translation in pure javascript

Collectives™ on Stack Overflow

Why doesn't js script work at django web-site?

Folder structure:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Folder structure:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related