Now that we have the audio module setup, let's take a look at how to theme the default flash player that comes with the audio module. The 1pixelout flash player comes standard in gray. If you are like me you probably want the flash player to have the same color scheme as your website. Or, at least a color scheme that doesn't look out of place on your website.
The 1pixelout player is themed, by default, via the function theme_audio_1pixelout_node_player. Let's start by overriding this function. Drupals theme system lets us have a function titled either phptemplate_audio_1pixelout_node_player or mytheme_audio_1pixelout_node_player (where mytheme is the name of your theme) that overrides the default function. So, let's start with:
<?php
function phptemplate_audio_1pixelout_node_player($node, $options = array()) {
return theme_audio_1pixelout_node_player($node, $options);
}
?>theme_audio_1pixelout_node_player is still going to do the heavy lifting for us (i.e., the theming) which is why we return the output of that function. We are going to modify the options which is what will theme the player.
The list of themable options:
- autostart=yes - The player will automatically open and start to play the track (default value is no)
- loop=yes - The track will be looped indefinitely (default value is no)
- bg=0xHHHHHH - Background colour option (where HHHHHH is a valid hexadecimal colour value such as FFFFFF or 009933)
- leftbg=0xHHHHHH - Left background colour
- rightbg=0xHHHHHH - Right background colour
- rightbghover=0xHHHHHH - Right background colour (hover)
- lefticon=0xHHHHHH - Left icon colour
- righticon=0xHHHHHH - Right icon colour
- righticonhover=0xHHHHHH - Right icon colour (hover)
- text=0xHHHHHH - Text colour
- slider=0xHHHHHH - Slider colour
- loader=0xHHHHHH - Loader bar colour
- track=0xHHHHHH - Progress track colour
- border=0xHHHHHH - Progress track border colour
Let's modify our phptemplate_audio_1pixelout_node_player function to customize a few of these characteristics.
<?php
function phptemplate_audio_1pixelout_node_player($node, $options = array()) {
$defaultoptions['leftbg'] = '0x000000';
$defaultoptions['rightbg'] = '0x000000';
$defaultoptions['lefticon'] = '0xFFFFFF';
$defaultoptions['righticon'] = '0xFFFFFF';
$options = array_merge($defaultoptions, $options);
return theme_audio_1pixelout_node_player($node, $options);
}
?>This sets the default left background, right background, left icon, and right icon colors. The options can still be overridden on a case by case basis throughout the theme. We will look at that in Part 2.
background customization
I've successfully customized every color except the one I want to. There is a big white bar that sticks out to the right before the play button is pressed. Is there anyway to theme that color, or is it an .swf issue? I have used this player in wordpress and it doesn't affect the background, but it does in drupal.
it works here: http://misterlib.com/2008/10/15/a-true-catalyst/
but not here: http://www.thenaz.net/onaz5
any ideas?
--k.lib
Good question
This works on the drupal 5 audio module 1.x versions. The function theme_audio_1pixelout_node_player, which is called, should set the wmode to transparent. That should fix your problem. If it is set to transparent and yet still white I don't know what to tell ya. It's in the browser.
Same Problem
I'm having the same problem with a D6 site using SWFTools to generate 1pixelout. It is occurring in both firefox and safari. I haven't tried others. Mine only shows up when I hover over the teaser it displays on because that changes the background from white to a gradient.
SWF background transparency across browsers and platforms
After a bit of googling for "wmode transparent", it became clear that different browsers handle this particular instruction in different ways. Recent builds of Firefox handle it fine if it's passed as an object param (which is how the drupal audio module works by default), but Safari/Google Chrome (and possibly IE, although I haven't tested it) expect it as an attribute in the embed tag.
To get transparency working in the 1pixelout audio player for just about all browsers, change the following in /modules/audio/players/1pixelout.inc:
<embed src="$url" flashvars="$flashvars" width="290" height="24" />to
<embed src="$url" flashvars="$flashvars" width="290" height="24" wmode="transparent" />The same applies to the button player, if you choose to use it.