在SoundManager2API的帮助下，我在HTML5/Flash中创建了一个音频播放器。

现在我想把它作为插件添加到Wordpress中，这样你就不需要编程技巧来定制播放器了。

插件应该只修改HTML和JavaScript中的一些值，然后将div作为永久div与主页上的音频播放器相呼应。

由于我不知道如何编写插件，我在《专业WordPress：设计与开发》一书中循序渐进地进行了介绍。但我不得不说，我真的被卡住了，因为Wordpress仪表板在激活插件后似乎没有显示任何东西，除了“外观”窗口小部件选项卡上的“音频播放器ID”。

这是我的代码：

<?php 
/*
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>
  <?php
  }
  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() {
  register_widget(\'audio_player_widget\');
}

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>
        <i>
        (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)
        </i>
        <td><input type="text" name="audio-File-url" 
        value="<?php echo esc_attr(\'audio-File-url\'); ?>" /></td>
      </tr>

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

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

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

      <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>
      </tr>
    </table>

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

<?php

  }

  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) {
    extract($args);

    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>

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

    <script>
        "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;
        }
    </script>
</div>

    <?php
    echo $after_widget;
  }
}
?>