I am trying to load a Js Dynamic Audio Synth [closed]

Question

Your enqueue is missing the action.
Try this instead :

/**
 * Enqueue audiosynth.
 */
function chicken_wings_scripts() {

    wp_enqueue_script( 'audiosynth', get_theme_file_uri( '/js/audiosynth.js' ), array(), filemtime( get_theme_file_path( '/js/audiosynth.js' ) ), true );

}
add_action( 'wp_enqueue_scripts', 'chicken_wings_scripts' );

—–EDIT FULL WORKING ANSWER—–
Do exactly the same steps.
Lets say that your theme name is mytheme.
Inside mytheme folder, you should find a js folder, if there is no one Create a js folder.
Inside the js folder or mytheme, add 3 empty files :
1- audiosynth.js
2- audiosynth.view.js
3- audiosynth.view.fire.js
Inside the first file audiosynth.js, copy and paste the content of the downloaded audiosynth.js file.
Inside the second file audiosynth.view.js, copy and paste the content of this file.
Inside the third file audiosynth.view.fire.js, ADD ONLY the following code :

var a = new AudioSynthView();
a.draw();

Now, open the functions.php of mytheme and add the following code :

/**
 * Enqueue audiosynth.
 */
function audiosynth_scripts() {

    wp_enqueue_script( 'audiosynth', get_theme_file_uri( '/js/audiosynth.js' ), array(), filemtime( get_theme_file_path( '/js/audiosynth.js' ) ), false );

    wp_enqueue_script( 'audiosynth.view', get_theme_file_uri( '/js/audiosynth.view.js' ), array(), filemtime( get_theme_file_path( '/js/audiosynth.view.js' ) ), false );

    wp_enqueue_script( 'audiosynth.view.fire', get_theme_file_uri( '/js/audiosynth.view.fire.js' ), array(), filemtime( get_theme_file_path( '/js/audiosynth.view.fire.js' ) ), true );

}
add_action( 'wp_enqueue_scripts', 'audiosynth_scripts' );

Now, open the style.css file inside mytheme and add the following at the very end of it :

.key {
    position: absolute;
    font-family: Helvetica;
    font-weight: 100;
    font-size: 12px;
    border: 1px solid rgba(32, 32, 32, 0.2);
    border-radius: 0px 0px 5px 5px;
    cursor: pointer;
    box-shadow: 0px 5px 1px rgba(32, 32, 32, 0.2);
    -webkit-transition: margin 0.05s ease, background-color 0.05s ease, box-shadow 0.05s ease;
}

.key:hover {
    background-color: rgb(255, 192, 32);
}

.key .label {
    position: absolute;
    bottom: 5px;
    text-align: center;
    left: 0px;
    right: 0px;
}

.black {
    background-color: rgb(32, 32, 32);
    color: #ffffff;
    z-index: 1;
    text-shadow: 0px -1px 1px rgba(255, 255, 255, 0.5);
}

.white {
    background-color: #ffffff;
    color: rgb(32, 32, 32);
    z-index: 0;
    text-shadow: 0px 1px 1px rgba(32, 32, 32, 0.5);
}

.keyboard-options {
    margin: 30px auto;
    width: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 200;
    padding: 10px;
}

.keyboard-holder {
    margin: 30px auto;
    height: 200px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

Now, you should add the following code, lets say at the very end of the header.php file that is inside mytheme.
DO NOT PUT THIS CODE INSIDE A <?php ?> tag, this is HTML :

<select ID="sound">
    <option value="0" selected>Keyboard</option>
    <option value="1">Organ</option>
    <option value="2">Acoustic Guitar</option>
    <option value="3">EDM, bro!</option>
</select>
<div ID="keyboard" class="keyboard-holder"></div>
<div class="keyboard-options">
    Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
    <input type="button" ID="-_OCTAVE" value="-" />
    <input type="button" ID="+_OCTAVE" value="+" /><br />
    <i>(Use left/right arrows to adjust with keyboard)</i>
</div>

NOW, go to your site, refresh the page and tada !!!

SYA 🙂

Related Posts: