WavePlayer

Author: Luigi Pulcini

  • Using a SoundCloud direct link

  • An audio file from Google Drive

  • Test for Soundcloud

  • Test for Safari AudioContext

  • Test for A/B comparison

  • Test for Thumb’n’Wave

  • Test for m4a files

  • Airi

    This is an inline block here.

  • Interacting with the player: Time Markers

    When using WavePlayer for your podcasts, it can be useful to reference a specific part of the audio track in the text, allowing your visitors to jump directly to that part. This can be easily achieved by adding simple anchors to any part of your page. The structure of the anchor can be as follows:

    <a href="#" onclick="WavePlayer.setCurrentTime(120)">your anchor text goes here</a>

    where the value provided to the setCurrentTime method is the time, expressed in seconds, you want your visitors to jump to. The previous anchor will allow users to jump to 2:00 into your track (2 minutes = 120 seconds). Please note that the href attribute of the anchor must be set to #: this allows the browser to execute the onclick script. If you left the href attribute empty, the page would reload and the onclick script would never execute.

    MarkerDescription
    1:00You can use markers to jump to any part of the track that is currently playing back
    This is a marker behind an icon.
    2:47A marker is nothing but an anchor with the href attribute set to # and the onclick attribute set to WavePlayer.setCurrentTime( 167 ) where 167 is the number of seconds from the beginning of the track.
    jump hereThe text of the anchor can be anything: a time reference, a title, a single word in the text, a whole part of the paragraph, an icon or an image. It just depends on what you put inside the anchor tags.
    When using the setCurrentTime method, you can specify decimals up to any desired precision. For example, by specifying 65.768, the player will jump to 1 minute, 5 seconds and 768 milliseconds into your audio file.

    Preventing the browser from jumping to the top of the page

    When you add the # symbol to the href attribute of an anchor element, the browser expects the subsequent text to be the ID of an element on the page, so that it can jump to it. When you set the href to just the # character – as recommended here to add time markers to your pages – the browser jumps to the top of the page, in absence of any other indication of a section where it should jump to. This could be an undesirable effect when you are using the anchors as Time Markers. In order to prevent this behavior, you can add a call to event.preventDefault() to the onclick attribute, as follows:

    <a href="#" onclick="event.PreventDefault(); WavePlayer.setCurrentTime(132);"></a>

    The difference between the default behavior and the one when event.preventDefault() is used can be observed by clicking the first two markers and the last two markers in the previous table.

  • Using multiple skins on the same page

    With WavePlayer 3 you have now the possibility to use multiple skins on the same page. The page you are reading now was assembled using the Gutenberg editor. After structuring the page and adding several players to each section, each player was adjusted to use one of the six skins included with the plugin.

    For example, the player on the left side of this paragraph uses the W3 Exhibition skin – a version of the W3 Standard skin where the thumbnail of the current track is used as a blurred background for the player. While the player right after this paragraph uses the Play’n’Wave skin – the skin that is used by default for the player automatically added to the WooCommerce single product page.

    In the following section, you can appreciate the Thumb’n’Wave skin, an interface we designed as a companion for the WooCommerce shop page.

0:00
0:00