I am having problems trying to make a Disney Hangman game that work by having the player click a button to play a voice of a Disney Character, which then they will have to guess what that sound is by using a keyboard that allows the player to click each letter until the word has been guessed unless the player has run out of letter guesses (max of 7), which then a hangman will be drawn and their game is over.

I don’t know how to add a button that when the player clicks, a random voice out of 7 characters from Disney will be played (sound is from a pool of sounds in the game) and the sound that is made will be connected to the right word the player will need to guess(like an original hangman game)

I have buttons upon click will allow the player to get hint on what the word will be.

Any feedback and help would be much appreciated because this is for my project that I’m really struggling on,

Thank you.

I already have the basics of the hangman game working and this is the current HTML code available below

   <!--question on left -->
        <div style=" width:50%; height:300px;position:absolute;left:0px;">
            <h3>Guessing Area</h3>
            <div id="guess">

            </div>
            <div style="position:absolute; bottom:10px; width:100%; height:70px;">
                <button id="hintBut">CLICK FOR A HINT</button>
                <p id="hintText"></p>
            </div>

        </div>

        <!--canvas on right-->
        <div style="background-color:  ;width:50%; height:300px;position:absolute;right:0px">
            <h3>Hangman</h3>
            <canvas id="myCanvas" style="width:100%; height:100%"></canvas>
        </div>

    </div>



    <div class="wrapper" style="border: #fff solid 2px; height:350px; ">
        <!--bottom-->
        <h4>Guessed Letter</h4>
        <h4 id="guessedLetter"></h4>
        <h3>Keyboard</h3>
        <div id="buttons">
        </div>

    </div>
</div>
<!--game area end-->

<!--game logic start-->
<script>
    //generate keyboard
    var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',
        'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
        't', 'u', 'v', 'w', 'x', 'y', 'z'
    ];

    myButtons = document.getElementById("buttons");
    letters = document.createElement("ul");
    for (var i = 0; i < alphabet.length; i++) {
        letters.id = "alphabet";
        list = document.createElement("li");
        list.id = "letter";
        list.innerHTML = alphabet[i];
        //console.log(list);
        //check clicking each buttons
        myButtons.appendChild(letters);
        letters.appendChild(list);
        checkEvent(list);

    }

    //generate word randomly from collection
    var maxWordLength = 5;
    var letterCount;
    var guessLetters;
    var hiddenLetters;
    var letterContainer;
    var theWord = new Array();

    var words = ["mickey", "pluto", "donald", "minnie", "elsa", "simba"];
    var numberOfWords = words.length;
    var wordPosition = Math.floor(Math.random() * numberOfWords)
    var word = words[wordPosition]; //individual word
    console.log(word);
    var numberOfLetters = word.length;
    var indexOfEach;


    //individual letter - hidden guessing
    guessLetters = document.getElementById("guess");
    hiddenLetters = document.createElement("ul");
    for (letterCount = 1; letterCount <= numberOfLetters; letterCount++) {

        hiddenLetters.id = "hiddenLetters";
        letterContainer = document.createElement("li");
        indexOfEach = letterCount - 1;
        letterContainer.id = "eachLetter" + indexOfEach.toString();
        letterContainer.innerHTML = "__";
        guessLetters.appendChild(hiddenLetters);
        hiddenLetters.appendChild(letterContainer);
        theWord.push(word[letterCount - 1]);
        console.log(letterContainer.id);
        console.log(theWord);
    }

    //checking event
    var guess = "?";
    var guessedLetter = document.getElementById("guessedLetter");
    guessedLetter.innerHTML = guess;


    function checkEvent(key) {

        key.addEventListener("click", mouseEventHandler);

        function mouseEventHandler(e) {
            guess = key.innerHTML;
            guessedLetter.innerHTML = guess;
            checkGuess(guess);
            console.log(guess);
        }
    }

    //check guessing
    var position;
    var duplicatePosition = findDuplicate(theWord);
    console.log(duplicatePosition);
    var wrongGuess = 0;
    var correctGuess = 0;
    var accessEachLetter;

    function checkGuess(guess) {


        if (theWord.includes(guess)) {
            position = theWord.indexOf(guess);
            console.log(position);
            accessEachLetter = document.getElementById("eachLetter" + position.toString());
            console.log(accessEachLetter);
            //all normal letters, no duplicate
            if (duplicatePosition.length == 0 && letterContainer.innerHTML == "__") {

                correctGuess++;
                accessEachLetter.innerHTML = guess;
                if (correctGuess >= theWord.length) {
                    alert("You Win!");
                }

            }

            // else { //
            //with duplicate, and do pressing on the duplicate letter button
            if (duplicatePosition.length != 0 && duplicatePosition.includes(position) && letterContainer.innerHTML == "__") {
                console.log(duplicatePosition.includes(position));
                for (var i = 0; i < duplicatePosition.length; i++) {

                    document.getElementById("eachLetter" + duplicatePosition[i].toString()).innerHTML = guess;
                    //  checkDuplicate = true;
                    correctGuess++;
                    if (correctGuess >= theWord.length) {
                        alert("You Win!");
                    }

                }


            }
            //with duplicate, and haven't pressing on the duplicate letter button
            if (duplicatePosition.length != 0 && duplicatePosition.includes(position) == false && accessEachLetter.innerHTML == "__") {
                console.log(duplicatePosition.includes(position));
                accessEachLetter.innerHTML = guess;
                correctGuess++;
                if (correctGuess >= theWord.length) {
                    alert("You Win!");
                }
            }

        } else { //guessing 7 times and animate hangman
            wrongGuess++;
            draw();
            console.log(wrongGuess);
            if (wrongGuess > 7) {
                alert("Game Over");
            }

        }
    }

    //find duplicate
    function findDuplicate(array1) {
        var object = {};
        var result = []; //
        array1.forEach(function(item, index) {
            if (!object[item]) {
                object[item] = index;
                //console.log(object[item]);
                console.log(object);
            } else {
                //object[item]+=1;
                result.push(object[item]);
                result.push(index);
                console.log(object[item]);
            }
        });

        return result; //

    }


    //check the wrong guessing everytime click the button
    //figure out how to draw stickman on canvas area

    //drawing function
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    //main draw Function
    function draw() {
        //how many times of wrong guessing was happened
        switch (wrongGuess) {
            case 1:
                drawFrame1();
                break;

            case 2:
                drawFrame2();
                break;

            case 3:
                drawFrame3();
                break;

            case 4:
                drawFrame4();
                break;

            case 5:
                drawMan1();
                break;

            case 6:
                drawMan2();
                break;

            case 7:
                drawMan3();
                break;

            case 8:
                drawMan4();
                break;
        }
    }

    //draw hanging frames
    function drawFrame1() {
        ctx.beginPath();
        ctx.moveTo(50, 100);
        ctx.lineTo(250, 100);
        ctx.stroke();

    }

    function drawFrame2() {
        ctx.beginPath();
        ctx.moveTo(60, 100);
        ctx.lineTo(60, 10);
        ctx.stroke();
    }

    function drawFrame3() {
        ctx.beginPath();
        ctx.moveTo(50, 10);
        ctx.lineTo(200, 10);
        ctx.stroke();
        ctx.moveTo(50, 10);
        ctx.lineTo(60, 20);
        ctx.stroke();
        ctx.moveTo(60, 20);
        ctx.lineTo(70, 10);
        ctx.stroke();
    }

    function drawFrame4() {
        ctx.beginPath();
        ctx.moveTo(160, 10);
        ctx.lineTo(160, 20);
        ctx.stroke();
    }

    //draw hanging man
    function drawMan1() { //head
        ctx.beginPath();
        ctx.arc(160, 28, 8, 0, Math.PI * 2, true);
        ctx.strokeStyle = "#006600";
        ctx.stroke();
        ctx.closePath();
    }

    function drawMan2() { //body
        ctx.beginPath();
        ctx.moveTo(160, 36);
        ctx.lineTo(160, 65);
        ctx.stroke();
    }

    function drawMan3() { //arms
        ctx.beginPath();
        ctx.moveTo(160, 40);
        ctx.lineTo(120, 50);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(160, 40);
        ctx.lineTo(200, 50);
        ctx.stroke();
    }

    function drawMan4() { //legs
        ctx.beginPath();
        ctx.moveTo(160, 65);
        ctx.lineTo(120, 80);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(160, 65);
        ctx.lineTo(200, 80);
        ctx.stroke();
    }
    //toggle hint text
    console.log(document.getElementById("hintText").innerHTML);
    document.getElementById("hintBut").onclick = function() {
        var theHint = "Selected from: donald, elsa, mickie, minnie, simba, pluto";
        var hintTxt = document.getElementById("hintText");
        if (hintTxt.innerHTML === theHint) {
            hintTxt.innerHTML = "";
        } else {
            hintTxt.innerHTML = theHint;
        }
    }
</script>
<!--game logic end-->