CODEWITHSUNDEEP
javascript
ylluminate
ylluminate

Reputation: 12379

Creating a var in javascript; modification of a script to create var usage?

I have a fairly simple problem for someone familiar with js. I quite like the style of the audio player from: http://wpaudio.com/

I've taken this and have it mostly extracted to a rails project, however it turns out that the WordPress plugin creates a variable _wpaudio within php as follows:

## WPaudio style, jQuery, SWFObject
function wpaHead(){
    global $wpa_options;
    # Put all styles into the _wpaudio settings object
    $style = '';
    foreach ( $wpa_options as $key => $value ) {
        $exploded = explode('_', $key, 3);
        if ( $exploded[1] == 'style' ) {
            $style .= $exploded[2] . ":'$value',";
        }
    }
    $style = trim( $style, ',' );
    $style = '{' . $style . '}';
    # Common JS
    $wpa_pref_link_mp3 = ($wpa_options['wpa_pref_link_mp3']) ? 'true' : 'false';
    $head = "<script type='text/javascript'>/* <![CDATA[ */ var _wpaudio = {url: '" . WPAUDIO_URL . "', enc: {}, convert_mp3_links: $wpa_pref_link_mp3, style: $style}; /* ]]> */</script>";
    echo $head;
}

Obviously nearly ALL of that code is not pertinent, however it's simply to illustrate that the _wpaudio var is created there. I don't really care to have the paths built, etc. I simply want to be able to manipulate the script such that the var is created within the js file. I've tried a few different ways, but I'm so uninitiated in javascript that my attempts have been futile thus far.

Here's the javascript which fails on load in the console with the Can't find variable: _wpaudio error: https://gist.github.com/fd208d327484306d65a9

How do I modify the script so that it properly creates the _wpaudio at initialization?

Upvotes: 1

Views: 126

Answers (1)

widged
widged

Reputation: 2779

If you run a search for _wpaudio across the files of the wpaudio plugin folder, you will find this, at line 150 of wpaudio.php (yup, the one that appears in the snippet you provide):

$head = "<script type='text/javascript'>/* <![CDATA[ */ var _wpaudio = {url: "[[path/to/wpaudio-mp3-player]]", enc: {}, convert_mp3_links: [[true|false]], style: {[[style]]} }; /* ]]> */</script>";

This tells you that you are supposed to insert this script snippet somewhere in your html page. The $head means that the plugin will add it in the head part of the document (<head>...</head>). That could be as good a place as any. In any case, a _wpaudio variable should exist before the plugin is initialized, that script snippet should be inserted before you load wpaudio.js.

<script type='text/javascript'> 
/* <![CDATA[ */ 
  var _wpaudio = {
   url: "[[path/to/wpaudio-mp3-player]]", 
   enc: {}, 
   convert_mp3_links: [[true|false]], 
   style: {[[style formatting as a json object, empty object should work]]} }; 
 /* ]]> */
</script>

Upvotes: 2

Related Questions