Audio player plugin for WordPress (EsAudioPlayer V1.7.0) Operation Manual

Features

  1. This audio player has three different modes:
    • Simple mode – The audio player has only a [Play/Stop] button. Also, it can have optional positioning slider.
    • Image mode – The audio player has no buttons. By clicking specific image in the article, music starts playing.
    • Slideshow mode – The audio player has no buttons. By clicking specific image in the article, the audio player starts playing slideshow with music. The timings of changing images are specified in the time table.
      (Some details of slide-show feature)

      • First of all, the area of displaying slide-show is defined, and then images are displayed in it at the specified timings.
      • The attributes of the displaying area are dimensions(width/height) and background-color.
      • Images are displayed in the center of the displaying area.
      • Images can be changed with cross-fade.
      • A image can be fadeouted.
      • The URL of audio data, and behaviors at each timings are specified in the time table.
      • You can make more than one timetable, and play them continuously.
      • The slide-show can be played repeatedly.
  2. In case of when an audio player is playing music, and another audio player starts playing, the former audio player stops playing music.
  3. You can put a ‘continuous-play’ button to play a series of players continuously.
  4. This audio player can be used with IE, Firefox, Chrome, Safari(including iOS).
  5. This audio player has accessibility features.
    • Text browser users can access to audio by download link.
    • Screen reader users can manipulate the player by invisible buttons, such as play-button, stop-button, forward button, rewind button, etc.

    (I tested these features with Microsoft Narrator, Focus talk(demo version), JAWS(demo version), ALTAIR, and NVDA.

Usage (for visitors)

  1. Simple mode
    • In the case of when the audio player has only start/stop button:
      By clicking the play button (see below), the audio player starts playing audio.

      When the player starts playing, its start button changes into a stop button(see below).

      By pressing stop button, the player stop playing audio. Meantime the stop button changes into the play button. When the play button is pressed again, the audio player plays audio from the beginning.
    • In the case of when the audio player has a start/pause button and the positioning slider:

      By clicking the play button (see below), the audio player starts playing audio.

      When the player starts playing, its start button changes into a pause button(see below).

      By clicking pause button, the player pauses playing audio. Meantime the pause button changes into the play button., When the play button is pressed again, the audio player resumes playing audio.

      You can move the slider once audio data is loaded.

      Loading of audio data starts by starting playback. The thick part of vertical line shows the progress of loading data (see below).
  2. Image mode

    By clicking an image in the post, the audio player starts playing audio. If you click it again, then the audio player stops playback. And when you click it again, the audio player starts playback from the start of the music.
  3. Slideshow mode

    By clicking an image in the post, the audio player starts playing slideshow. If you click it again, then the audio player stops playing slideshow. And when you click it again, the audio player starts playback from the start of the slideshow.

Usage (for visitors with visual disability)

  1. Using the audio player with text-based browsers
    • Visitors can access to audio by pressing the link to the audio data file. The link is read out “Download the audio”(default) . The link is invisible.
    • When you press the link, some browsers save the audio, the other launch the media player and start playing the audio.
  2. Using the audio player with screen-readers with conventional web browsers
    • The audio player creates control buttons which can be read by screen readers and are invisible. Users manipulate the audio player by pressing these buttons.
    • Basic control buttons can be created in the following combinations:
      1. [Play / Stop] button (default pronunciation: “play or stop”)
      2. [Play] button and [Stop] button (default pronunciation: “play”, “stop”, respectively)
      3. [Play / Pause] button and [Stop] button (default pronunciation: “play or pause”, “stop”, respectively)
    • Functions of basic buttons are as follows:
      1. When [Play] button is pressed, the player begins playing audio.
      2. When [Stop] button is pressed, the player stops playing audio.
      3. When [Play / Stop] button is pressed and the player is not playing, it starts playing audio from the top. If the player is not playing audio, it stops playing audio.
      4. When [Play / Pause] button is pressed and the player is not playing, it starts/resumes playing audio . If the player is playing audio, it pauses playing audio.
    • Also, the audio player can produce buttons for moving forward and backward playing position. The amount of moving can be prepared 2 kinds at a time, so up to 4 buttons can be produced . The pronunciation and the amount of moving are changed in the admin page.
      (ex)

      • A button to move forward 15 seconds (pronunciation: “forward 15 seconds”)
      • A button to move backward 15 seconds (pronunciation: “rewind 15 seconds”)
      • A button to move forward 10% (pronunciation: “forward 10%”)
      • A button to move backward 10% (pronunciation: “rewind 10%”)

Usage (for site creators)

  1. Install
    Install and enable the plugin in the WordPress setting page.
  2. Setting
    (No need to do setting except for simple mode.)

    • Go to the setting page.
      By clicking ‘Es Audio Player’ link in the Settings tab of the administration page of WordPress, you can access to the setting page of this plugin.
    • Entering parameters
      Enter each parameters and click ‘Save Changes’ button.

      1. Color Settings (upper half of the configuration page)

        Descriptions of each setting items

        Setting items Descriptions
        Base Color(Play) Specify background color of play button by 6-digits hexadecimal like CSS. (ex. #ff56ab)
        Symbol Color(Play) Specify symbol color of play button (same as above)
        Base Color(Stop) Specify background color of stop button (same as above).
        Symbol Color(Stop) Specify symbol color of stop button (same as above).
        Base Color(Pause) Specify background color of pause button (same as above).
        Symbol Color(Pause) Specify symbol color of pause button (same as above).
        Slider Color (line) Specify color of vertical line of positioning slider (same as above).
        Slider Color (knob) Specify color of knob of positioning slider (same as above).
        Shadow Size Specify how wide you want show shadow out of the main part of the audio player. When you want to show it 10% width of the box, specify 0.1. If you don’t want to show shadow, specify 0.
        Shadow Color Specify most thick color of shadow by 6-digits hexadecimal like CSS.
        Corner radius Specify the corner radius of a rounded rectangle in % of the shorter side.
        Smartphone size Specify the size adjustment of smartphones in % of normal size.

      2. Accessibility Settings (lower half of the configuration page)

        Descriptions of each setting items

        • For Text-based Browsers
          Setting items Descriptions
          Status When Enable is selected, the player creates link to audio for downloading. When Disable is selected, it don’t.
          Download link speech Specify the pronunciation of download link.
        • For Screen Readers
          Setting items Descriptions
          Status When ‘Enable’ is selected, the player creates control buttons which can be read by screen reader. When Disable is selected, it don’t.
          Basic Buttons Specify the combination of control buttons by selected radio button.

          • When [Play/Stop] is selected, only [play and stop] button is created.
          • When [Play]+[Stop] is selected, [play]button and [stop] button are created.
          • When [Play/Pause]+[Stop] is selected, [Play/Pause] button and [Stop] button are created.
          Play button speech Specify the pronunciation of play button. ‘%title%’ is replaced with the title parameter in the shortcode.
          Stop button speech Specify the pronunciation of stop button. ‘%title%’ is replaced with the title parameter in the shortcode.
          Play/Stop button speech Specify the pronunciation of play/stop button. ‘%title%’ is replaced with the title parameter in the shortcode.
          Play/Pause button speech Specify the pronunciation of play/pause button. ‘%title%’ is replaced with the title parameter in the shortcode.
          Forward Button Settings of moving-forward button.

          • When ‘Enable’ is checked, the button is created.
          • Specify the amount of moving in the ‘Amount’ textbox and select the unit from “sec”(seconds) and “%”.
          • Specify the pronunciation of the button in the ‘Speech’ textbox. ‘%title%’ is replaced with the title parameter in the shortcode.
          Rewind Button Settings of moving-backward button. The setting method is same as above.
          Fast Forward Button Settings of fast moving-forward button. The setting method is same as above.
          Fast Rewind Button Settings of fast moving-backward button. The setting method is same as above.
  3. How to define audio players in the post (shortcodes).
    • Simple mode
      [esplayer url="URL to the sound file" width="width" height="height" shadow_size="size of shadow" shadow_color="shadow color" duration="duration" vp="vertical adjustment" autoplay="autoplay flag" title=”title”seriesplaybutton="continuous playing button flag" sid="grouping ID for continuous playing"]
      Description of each parameters

      Parameters Description Default
      URL to the sound file Specify the URL of the sound file. The url must begin with http:// and have an absolute path. Cannot be omitted.
      width Specify the width of the audio player in pixels (without ‘px’). When width is greater than 2x of height, the positioning slider is displayed. ・If you omit one of width or height, both width and height becomes the same.
      ・If you do not determine both width and height, the displaying size becomes 27×27 pixels.
      height Specify the height of the audio player in pixels (without ‘px’).
      size of shadow Specify how wide you want show shadow out of the main part of the audio player. When you want to show it 10% width of the box, specify 0.1. If you don’t want to show shadow, specify 0. The value specified in the setting page is applied.
      Shadow color Specify color of the most thick color of shadow, with ‘#’+6-hexadecimal like CSS. The value entered in the setting page is applied.
      duration Specift playing time. Its format is MM:SS.ss(MM:minutes、SS:seconds、ss:seconds(below 1sec). (ex)”3:12.23” : 3minutes+12.23seconds. (for more detail, see below ※1). If this parameter is omitted, tentative playing time calculated by system is applied while loading audio data.
      vertical adjustment Specify the amount of vertical adjustment in pixels. Note that the sign of the parameter is opposite to that of CSS top. 0
      Autoplay flag “true”/”false” “false”
      title In the accessibility features, %title% in the button names are replaced with this parameter. (empty string)
      continuous playing button flag See below ※2 “false”
      grouping ID for continuous playing See below ※2 (empty string)

      ※1 Because MP3 data don’t have playing time, it cannot be determined until loading MP3 finishes. So while loading MP3, only tentative playing time is available. Because of this, under some OSes (such as iOS), the tentative playing time is very unstable. As a result, The knob of the positioning slider jigs. To avoid this phenomenon, you can specify playing time in the definition of the audio player to stabilize the motion of the slider knob while loading MP3. If you do not mind this phenomenon(unstable motion of slider knob), or in the case slider is not displayed, you need not to specify duration.

      ※2 Continuous playing
      You can play multiple players continuously from the top by pressing continuous-playing button. This can be achieved by grouping multiple players by an ID and putting a continuous-playing button in an article.

      Write shortcodes like the following:

      1. Grouping players
      Set identical IDs to multiple players.

      [esplayer url=”http://・・・/audio_1.mp3” sid=”grouping ID for continuous playing”]
      [esplayer url=”http://・・・/audio_2.mp3” sid=”grouping ID for continuous playing”]
             :
      [esplayer url=”http://・・・/audio_n.mp3” sid=”grouping ID for continuous playing”]

      2. Put an continuous-playing button

      [esplayer seriesplaybutton=”true” sid=” grouping ID for continuous playing”]

      You can put a continuous-playing button anywhere.

      When an grouping ID is omitted in the shortcode of continuous-playing button, all players in the screen are targeted for continuous playing. Please note that when multiple articles are displayed in a screen, all players in all article in a screen are played continuously.

      For an example of coding and its output, see ‘Example 3 (simple mode, continuous button)’ at the bottom of this manual.

    • Image mode
      [esplayer url="URL to the sound file" img_id="ID of the image file" autoplay="autoplay flag"]
      Descriptions of each parameters

      Parameters Descriptions Default
      URL to the sound file Specify the URL of the sound file. The URL must begin with ‘http://’ and must be an absolute path. Cannot be omitted.
      URL to the image file Specify the ID of the image file. The image you specify must be used in the post. Cannot be omitted.
    • Slideshow Mode
      [esplayer timetable_id="List of timetable ID" width="Width of display area"
      height="Height of display area" background-color="Background color of display area" loop="repeat flag" autoplay="autoplay flag"]

      • Definition of the audio player
        Parameters Descriptions Default
        List of timetable ID Specify timetable ID. If you want to play multiple timetables in sequence, write ID list as a comma-separated list. Cannot be omitted.
        Width of display area Specify the width of the display area in pixels (without ‘px’). Cannot be omitted.
        Height of display area Specify the height of the display area in pixels (without ‘px’). Cannot be omitted.
        Background color of display area Specify background color of the display area in ‘#’+6-hexadecimal like CSS. “#ffffff”。
        Repeat flag true(do repeat) or false(don’t repeat) FALSE
      • Definition of the time table
        [esplayer_timetable]
        id="ID of this time table"
        url="URL of the sound file"
        default_img="the URL of the image to display before starting slideshow"
        default_duration="default duration of switching images(milliseconds)" ← Default: 500ms
        time="time 1"
          (The behavior at time 1)
        time="time 2"
          (The behavior at time 2)
        time="time 3"
          (The behavior at time 3)
          ~~~~~~
        time="time n"
          (The behavior at the time n)
        time="total playing time" 
          end
        [/esplayer_timetable]
        

        The ‘total playing time’ line and ‘end’ line can be omitted (If these lines are omitted, the slideshow ends when finishes playing music. )

        • Multiple time tables can be defined for one slideshow.
        • ime is represented by the format “mm:ss.ff”. (mm:minutes、ss:seconds、ff:1/100seconds)。
        • You can specify each behaviors at each timings like following:
          • To show an image:
            
            img="the URL of the image to display"
            width="the width of the image"  .
            height="the height of the image"
            duration="How long does it take to change images(milliseconds)"
            
            • If ‘width’ and ‘height’ lines are omitted, the size of the image is resized so that whole of this can be contained in the display area.
            • the ‘duration’ line is omissible. If this is omitted, the default value is applied.
          • To fadeout:
            img=""

Examples

  1. Example 1 (Simple mode)

    [esplayer url="http://???.mp3" width="90" height="20" shadow_size="0.0"]
    [esplayer url="http://???.mp3" width="500" height="30" shadow_size="0.0"]
    [esplayer url="http://???.mp3" width="30" height="30" shadow_size="0.0" vp="0px"]a
    a
    a
    a
    a
    a
    a
    a
    a
  2. Example 2 (Simple mode)

    [esplayer url="http://???.mp3" shadow_size="0.1" width="90" height="30"] [esplayer url="http://???.mp3" width="150" height="50" shadow_size="0.1" duration="11:00"] [esplayer url="http://???.mp3" width="300" height="100" shadow_size="0.1"] [esplayer url="http://???.mp3" width="510" height="170" shadow_size="0.1"] [esplayer url="http://???.mp3" width="12px" shadow_size="0.1" vp="0" ]aaa
    bbb
    cccc
    dddd
  3. Example 3 (Simple mode, continuous playing button)

    [esplayer url='http://example.com/hu7/wp-content/uploads/bass.mp3' sid="a1" width="150" height="25" vp="-5"]bass
    [esplayer url='http://example.com/hu7/wp-content/uploads/CHINA_1.mp3' sid="a1" width="150" height="25" vp="-5"]CHINA_1
    [esplayer url='http://example.com/hu7/wp-content/uploads/CRASH_1.mp3' sid="a1" width="150" height="25" vp="-5"]CRASH_1
    [esplayer url='http://example.com/hu7/wp-content/uploads/CRASH_5.mp3' sid="a1" width="150" height="25" vp="-5"]CRASH_5
    [esplayer url='http://example.com/hu7/wp-content/uploads/rain.mp3' sid="a1" width="150" height="25" vp="-5"]rain
    [esplayer seriesplaybutton="true" sid="a1" vp=-5]Continuous Play
  4. Example 3 (Image mode)

    
    Click this image to play music.
    
    <a href="http://???.jpg"><img id="aaa" src="http://???.jpg" alt="" title="vor_frelsers_kirkegaard" width="870" height="870" class="alignnone size-full wp-image-304" /></a>
    
    
  5. Example 4 (Slideshow mode)

    Click the image below to start slideshow.
    <div align="center">[esplayer timetable_id="id1,id2" width="800px" height="600px" bgcolor="#fff" loop="true" ][esplayer_timetable]
    id="id1"
    url="http://???.mp3"
    default_img="http://???.jpg"
    time="00:05.82"
    img="http://???.jpg"
    time="00:06.94"
    img="http://???.jpg"
    time="00:14.33"
    img="http://???.jpg"
    duration="3000"
    time="00:20.00"
    img="http://???.jpg"
    time="00:23.82"
    img="http://???.jpg"
    time="00:25.94"
    img="http://???.jpg"
    time="00:27.33"
    img="http://???.jpg"
    duration="5000"
    time="00:36.33"
    end
    [/esplayer_timetable]
    
    [esplayer_timetable]
    id="id2"
    url="http://???.mp3"
    default_img="http://???.jpg"
    default_duration="1000"
    time="00:05.82"
    img=""
    duration="2000"
    time="00:10.82"
    img="http://???.jpg"
    time="00:20.65"
    img="http://???.jpg"
    time="00:30.33"
    img="http://???.jpg"
    [/esplayer_timetable]
    
    </div>
    
Be Sociable, Share!

32 thoughts on “Audio player plugin for WordPress (EsAudioPlayer V1.7.0) Operation Manual

  1. I’m having trouble getting the play button to be vertically aligned on my list. Here is the sample (Under the Ghost Blonde record) http://dreamtrampoline.com/sandbox/nojoy/music/

    I tried to do this, but it didn’t work:
    [esplayer url="http://dreamtrampoline.com/sandbox/nojoy/wp-content/uploads/2012/08/no-joy-hawaii.mp3" width="14px" height="14px"; vertical-align:middle;]

    Not sure what to try next?

    • The player doesn’t work in Internet Explorer (latest version)!!
      All the other browsers no problem.

      Do you have a solution for this problem?

      Regards,

      Marcel Nooijen

  2. Thanks a lot for this great and very smart plug-in!

    How do I realize a loop (continuous playing of one file)? I couldn’t get it to work with the continuous play flag.

    Thanks in advance ;-)

  3. Hey there!

    Just to be clear, this can play multiple song on one player correct? Do I just put the MP3 consequetively with “” ?

    Thanks in advance! The cleanest design for music players I have seen. Also, will the song be interrupted when you go to a different page?

    Best,

    Jenell

  4. Thanks for this great WP audio player. It’s the only one I could find that’s simple, customizable, and works with almost every browser including iOS. I’ve not, however, been able to get it to work on IE9. (The player appears but does not play.) Is there something I can do to make it work? Or is there an update that can solve this? Thanks for any help you can give.

    • Unfortunately I cannot reproduce the problem. Can you provide more detailed information?

  5. Hi,
    Just to say : You are the best !
    This plugin work like a charm. Functional, simple, clean, nice.
    So, Thank you so much for share your code. Really thx.
    Have a nice day. Eric from France

  6. Oh my goodness! Amazing article dude! Thank you so much, However
    I am experiencing difficulties with your RSS. I don’t understand the reason why I can’t join it. Is there anybody else having identical RSS issues? Anybody who knows the answer will you kindly respond? Thanx!!

  7. I have the same problem, the player shows up in ie9 bat does not do anything, just act lice a picture.

  8. How do I get the title of the audio file to display? Also, how do I advise people to download the audio file I am providing? Most of the time you can right click and save as, but I don’t see that option with the simple player. Here is my shortcode I am using:
    [esplayer url="https://s3.amazonaws.com/smartwomen/audio/MomsLittleAngels.mp3" width="350" height="40" shadow_size="0.1" shadow_color="#666" autoplay="false" duration="" title="Mom's Little Angels"]

    Thanks
    Nicki

    • This plugin cannot display the title nor download link. The title attribute is used for accessibility so that screen reader can speak the title. Also this plugin generates download links but they are for text-based browsers used by people who have problems with their visions. So you have to write titles and download links in your articles.

  9. I must be really new because I can’t get the code to install on a post.
    I go to html mode, copy and paste what you wrote above, adjusted for my mp3
    and when I upload it just shows a space.
    I use HTML all the time but have never seen [ used ]. It is working….

  10. Hey!

    Thanks for a great plugin. Just one question: Using a plugin called Click to flash in Safari and Flashblock in firefox makes the player disappear.

    Any suggestions?

    Thanks

    • This plugin uses the soundmanager2 library to play audio. It uses headless flash to play mp3s in Firefox because Firefox does not have the function to play MP3s. So the player does not work if flash is blocked.

  11. Pingback: esplayer docs and examples | Phil Shackleton

  12. Used shortcode in HTML mode but player not displaying. Using latest version of WordPress and Firefox as browser

  13. Hi, this player does not play on my website. I can see the interface but when I click on Play, nothing is downloaded or played. What could I be doing wrong?

  14. It works great! I tried, 12 different plugins looking for the functionality (and for it to actually work) that I needed. Finding one has been so aggravating! Thanks a 1,000,000!!! Email me when you have a donation page.

  15. I installed and activated the plug in and it doesn’t seem to be working.

    I am new to Word Press, so is there any coding I need to change and if so – can you tell me where?

    Thanks

    • Write a shortcode in the post. For example:
      [esplayer url="http://tempspace.net/mp3s/440Hz.mp3" width="200" height="25"]

      If the audio plugin is enabled, the code above is replaced with an audio player.

      Please note that when you write a shortcode, the post editor must be
      HTML mode, not visual mode.

  16. I installed this and activated the plugin, but the player does not show up when using simple mode. Any idea why not? I am using WordPress 3.3.

Comments are closed.