Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

I saw a working Javascript Piano which I would like to implement on my page as a shortcode. I have already enqueued the Js file, and I can see it when I view my page source.

This is how I enquued it:

function chicken_wings_scripts() {

         wp_enqueue_script( 'audiosynth',  get_stylesheet_directory_uri() . '/js/audiosynth.js', array(), null, true );
    }
}

My main challenge is I don't know how to call the code to display on frontend as the documentation is not a beginner friendly.

The documentation said "audiosynth implements a singleton class, AudioSynth"

Synth instanceof AudioSynth; // true

var testInstance = new AudioSynth;
testInstance instanceof AudioSynth; // true

testInstance === Synth; // true

This is a working example of the Piano /

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

I saw a working Javascript Piano which I would like to implement on my page as a shortcode. I have already enqueued the Js file, and I can see it when I view my page source.

This is how I enquued it:

function chicken_wings_scripts() {

         wp_enqueue_script( 'audiosynth',  get_stylesheet_directory_uri() . '/js/audiosynth.js', array(), null, true );
    }
}

My main challenge is I don't know how to call the code to display on frontend as the documentation is not a beginner friendly.

The documentation said "audiosynth implements a singleton class, AudioSynth"

Synth instanceof AudioSynth; // true

var testInstance = new AudioSynth;
testInstance instanceof AudioSynth; // true

testInstance === Synth; // true

This is a working example of the Piano https://keithwhor/music/

• jquery

1 Answer 1

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 :)