I created an audio player in HTML5/Flash with the help of the SoundManager2 API.

Now I want to add it to Wordpress as a plugin, so that you don't need programming skills to customize the player.

The plugin should just modify a few values in the HTML and the JavaScript and then echo the div with the audio player on the Homepage as a permanent div.

Since I didn't really knew how to program plugins I followed the step-by-steps in the book "Professional WordPress : Design and Development". But I have to say that I'm really stuck because the Wordpress dashboard doesn't seem to show anything after activating the plugin besides "Audio player's ID" on the widget tab in "Appearance".

Here is my code :

Plugin Name: Frontpage audio player
Description: Audio player
Version: 0.1

register_activation_hook(__FILE__, 'audio_player_install');
function audio_player_install() {

  function custom_dependencies() {
    <link rel="stylesheet" type="text/css" href="style-min.css" />
    <script type="text/javascript" src="script/berniecode-animator.js"></script>
    <script type="text/javascript" src="script/soundmanager2-nodebug-jsmin.js"></script>
    <script type="text/javascript" src="script/360player.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  add_action('wp_head', 'custom_dependencies');

register_deactivation_hook(__FILE__, 'audio-player-uninstall');
function audio_player_uninstall() {
  //do something

add_action('widgets_init', 'audio_player_register_widgets');
function audio_player_register_widgets() {

class audio_player_widget extends WP_Widget {
  function audio_player_widget() {
    $widget_ops = array(
      'classname' => 'audio-player-widget',
      'description' => 'Displays the audio player on the front page.',
    $this->WP_Widget('audio_player_id', "Audio player's ID", $widget_ops);

  function form($instance) {
    $defaults = array(
      "file_Path" => 'audio/test.mp3',
      "background_Ring_color" => '#000',
      "loading_Ring_color" => '#000',
      "playing_Ring_color" => '#ffd700',
      "equalizer_Data_color" => '#ff8C00',
    $instance = wp_parse_args((array)$instance, $defaults);
    $file_Path = strip_tags($instance['file_Path']);
    $bg_RingClr = strip_tags($instance['background_Ring_color']);
    $loading_RingClr = strip_tags($instance['loading_Ring_color']);
    $playing_RingClr = strip_tags($instance['playing_Ring_color']);
    $equalizer_DataClr = strip_tags($instance['equalizer_Data_color']);

<div class="wrap">
  <h2>Frontpage Audio player settings :</h2>

  <form method="POST" action="options.php">
    <?php settings_fields('audio_settings_group'); ?>
    <table class="form-table">
      <tr valign="top">
        <th scope="row">Name of the file you want to play : </th>
        (You also have to specify the audio file's extension. eg : ".mp3", ".wav", ".ogg")
        <br />
        (If no file is specified, it will play the last created file by default)
        <td><input type="text" name="audio-File-url" 
        value="<?php echo esc_attr('audio-File-url'); ?>" /></td>

      <tr valign="top">
        <th scope="row">Ring background color : </th>
        <td><input type="text" name="background-Ring-color" 
        value="<?php echo esc_attr('background-Ring-color'); ?>" /></td>
        <i>Default color is "#000".</i>

      <tr valign="top">
        <th scope="row">Ring color while loading : </th>
        <td><input type="text" name="loading-Ring-color" 
        value="<?php echo esc_attr('loading-Ring-color'); ?>" /></td>
        <i>Default color is "#000".</i>

      <tr valign="top">
        <th scope="row">Ring color of already played sound : </th>
        <td><input type="text" name="playing-Ring-color" 
        value="<?php echo esc_attr('playing-Ring-color'); ?>" /></td>
        <i>Default color is "#ffd700".</i>

      <tr valign="top">
        <th scope="row">Equalizer (sound wave graph) color : </th>
        <td><input type="text" name="equalizer-Data-color" 
        value="<?php echo esc_attr('equalizer-Data-color'); ?>" /></td>
        <i>Default color is "#ff8C00".</i>

    <p class="submit">
      <input type="submit" class="button-primary" value="Save Changes" />



  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $file_Path = strip_tags($new_instance['file_Path']);
    $bg_RingClr = strip_tags($new_instance['background_Ring_color']);
    $loading_RingClr = strip_tags($new_instance['loading_Ring_color']);
    $playing_RingClr = strip_tags($new_instance['playing_Ring_color']);
    $equalizer_DataClr = strip_tags($new_instance['equalizer_Data_color']);

    return $instance;

  function widget($args, $instance) {

    echo $before_widget;

    $file_Path = strip_tags($instance['file_Path']);
    $bg_RingClr = strip_tags($instance['background_Ring_color']);
    $loading_RingClr = strip_tags($instance['loading_Ring_color']);
    $playing_RingClr = strip_tags($instance['playing_Ring_color']);
    $equalizer_DataClr = strip_tags($instance['equalizer_Data_color']);


<div id="audio">
    <div id="sm2-container">
        <!-- sm2 flash goes here -->

    <div class="sm2-inline-list">
      <div class="ui360 ui360-vis">
        <a class="audio-file" href="<?php echo $file_Path ?>">
            <!-- links -->

        "use strict";
        soundManager.url = 'swf/';
        soundManager.useFastPolling = true;

        threeSixtyPlayer.config.loadRingColor = '<?php echo $loading_RingClr ?>';
        threeSixtyPlayer.config.playRingColor = '<?php echo $playing_RingClr ?>';
        threeSixtyPlayer.config.eqDataColor = ''<?php echo $equalizer_DataClr ?>';
        threeSixtyPlayer.config.backgroundRingColor = '<?php echo $bg_RingClr ?>';

        threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?false:true);
        threeSixtyPlayer.config.showHMSTime = true;

        threeSixtyPlayer.config.useWaveformData = true;
        threeSixtyPlayer.config.useEQData = true;

        if (threeSixtyPlayer.config.useWaveformData) {
          soundManager.flash9Options.useWaveformData = true;
        if (threeSixtyPlayer.config.useEQData) {
          soundManager.flash9Options.useEQData = true;
        if (threeSixtyPlayer.config.usePeakData) {
          soundManager.flash9Options.usePeakData = true;

        if (threeSixtyPlayer.config.useWaveformData || threeSixtyPlayer.flash9Options.useEQData || threeSixtyPlayer.flash9Options.usePeakData) {
          soundManager.preferFlash = true;

        if (window.location.href.match(/html5/i)) {
          soundManager.useHTML5Audio = true;

    echo $after_widget;

Thanks in advance for your help !

1 Answer 1


Your plugin just creates a widget, you won't see anything else in the Dashboard. If you drag the widget into a widget area, you'll see all of the options to configure it.

one other issue you will potentially have is the way you're including javascript for your widget. if you use this with another plugin that requires jQuery, you will certainly have a conflict. see the wp_enqueue_script function for properly including scripts and search this site for lots of examples.

  • Thank you very much for your quick answer ! I didn't look into the "wp_enqueue_script" function yet, but I did the drag-and-drop thing in the widget panel, and filling values into the input fields works, but after that, when I click on "Save", it just resets all the fields. Any idea ? Jun 16, 2012 at 20:53
  • your form function is not correct. look in wp-includes/default-widgets.php for examples of how to output the form.
    – Milo
    Jun 16, 2012 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.