Skip to content
Advertisement

Is it possible to invoke sound from the JS file in Django’s HTML template without Ajax?

I’m in the middle of migrating a site to Django framework. Almost all JS scripts works, except those related to sound.

I have a play/pause button for a song and some sounds invoked when the mouse is hovering over particular buttons. For just those files I received from the console:

enter image description here Of course, those files are in /static/hangman_game/ folder.

Other static files (js, css) work. Is it possible to somehow activate those functions related to playing sound/music without Ajax?

Function in Django’s template html is onclick="togglePlay().

Variables and functions used in JS file:

var yes = new Audio("yes.wav");
var no = new Audio("no.wav");


var myAudio = new Audio('John Jacob Niles - The Maid Freed From The Gallows (1940).mp3');

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

function checkIt(num)
{
    var matched = false;

    for (i=0; i<lengthPass; i++)
    {
        if(pass.charAt(i) == letters[num])
        {
            //// alert(i); //Test
            pass1 = pass1.setCharacter(i, letters[num]);
            matched = true;
        }
    }
    if(matched == true)
    {
        yes.play();
        var element = "let" + num;
        document.getElementById(element).style.background = "#003300";
        document.getElementById(element).style.background = "#00C000";
        document.getElementById(element).style.background = "3px solid #00C000";
        document.getElementById(element).style.background = "default";

        updatePass();
    }
    else
    {
        no.play();
    }

Advertisement

Answer

The problem with files not found (what was encountered in inspection and server’s console) is very similar to my other question. When I migrate the site to Django, all file paths placed in the JS file have to have the server address as a root. So when I had for example in js file:

var yes = new Audio("yes.wav");
var no = new Audio("no.wav");

… all that’s needed is just add http://127.0.0.1:8000/ like that:

var yes = new Audio("http://127.0.0.1:8000/static/hangman_game/yes.wav");
var no = new Audio("http://127.0.0.1:8000/static/hangman_game/no.wav");
Advertisement