Improve WP Audio Player JS (Do Not Use Inline JS)
SophieG - September 11, 2009 - 12:43
| Project: | MP3 Player |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
Hi everyone,
i have a kind of newbie question regarding this module.
In my site, i call all my scripts in the bottom of my page, using
<?php
print $scripts
?>By doing that, the mp3 player does not work.
In the other hand, if i put the
<?php
print $scripts
?>How can i call only the player in my head and the rest in the bottom ??
Thanks !
SophieG
#1
Unfortunately I don't think you will be able to separate out the JS. I don't think the JS file supplied in the WP Audio Player is Drupal Friendly so I may have to re-write it. We will see.
#2
I have run into this too. Inline JS is bad. Here is my solution, which should be put into the module.
Override theme function like so:
<?php
/**
* Setup theme function for the MP3 Player.
*/
function MYTHEME_mp3player($player = 'Default', $file = NULL, $title = NULL, $artist = NULL, $description = NULL) {
// Static variables
static $mp3_player_id;
$mp3_player_id++;
$extras = '';
$extras = NULL;
if ($title != NULL) {
$extras .= ', titles: "' . addslashes($title) .'"';
}
if ($artist !=NULL) {
$extras .= ', artists: "' . addslashes($artist) .'"';
}
// Get Player Settings
if ($player != 'Default') {
$js_audio_settings = cache_get('mp3player_player_' . $player);
$extras .= ', ' . $js_audio_settings->data;
}
if ($description != NULL) {
$description = '<p class="mp3player_description">' . $description . '</p>';
}
if (module_exists('simplecdn')) {
$file = simplecdn_rewrite_url($file, 'mp3player');
}
if(variable_get('mp3player_encode', 'no') == 'yes') {
$audio_url = mp3player_encodeSource($file);
}
else {
$audio_url = $file;
}
// Tell JS about our audio player(s)
drupal_add_js(
array('mp3player' =>
array(
'mp3player_' . $mp3_player_id => array(
'extras' => $extras,
'audio_url' => $audio_url,
),
),
),
'setting'
);
// Create output
return '
<p id="mp3player_' . $mp3_player_id . '" class="mp3player">
' . t("You may need. <a href='http://get.adobe.com/flashplayer/'>Adobe Flash Player</a>.") . '
</p>
' . $description . '
';
}
?>
I have added this to my theme JS so it does nto need to be included. But if worked into the module, a call will need to be made to include it.
/**
* Implemetation of Drupal Behavior
*/
Drupal.behaviors.mp3players = function(context) {
// Render MP3Players
$('.mp3player:not(.mp3player-processed)').each(function() {
var $thisPlayer = $(this);
var playerID = $thisPlayer.attr('id');
$thisPlayer.addClass('mp3player-processed');
// Check variables so we dont get JS errors
if (Drupal.settings.mp3player != undefined && AudioPlayer != undefined && Drupal.settings.mp3player[playerID] != undefined) {
var playerValue = Drupal.settings.mp3player[playerID]
var soundFileValue = playerValue.audio_url;
// Check for extras
if (playerValue.extras != null) {
soundFileValue = soundFileValue + playerValue.extras;
}
// Create new player and add code
var newPlayer = AudioPlayer.embed(playerID, { soundFile: soundFileValue });
}
});
}
Some other various things to note:
* Do no use globals unless very necessary. In this case a static variable works well
* Do not use Inline JS
* Utilize Drupal.behaviors.
* Follow Drupal coding standards
* That message for the Adobe Player is not really accurate.
* You should separate out the rendering process and the theming process. Basically the rendering adds the JS file and data. Then the theming would build the HTML.
Note that I have not actually tried this with multiple players on one page, but it should work.
As always, thanks for your work and contributions.
#3
Thanks zzolo still running into one issue with the solution you posted above.
Works fine with multiple players on a page etc. However if I pass some players into a View and make the View page with AJAX then I run into trouble.
Obviously the Drupal.behaviors still gets called and that gets processed, but I don't think the settings part gets remade on the AJAX call. Any quick fixes you can think of?
#4
#5
Ok I fixed the issue, solution is a little bit messy at the moment since I have to convert a string twice, once in PHP and once in JS. If you can see an easier method to pass the JS array let me know. Otherwise if you think it's the best solution available I will clean up the code. You can find the fix in the dev version that will get released tonight.
#6
Automatically closed -- issue fixed for 2 weeks with no activity.