Adding Web Monetization to the Hyperaudio Wordpress Plugin

An overarching our aim with Hyperaudio is to provide a platform where users have control over their data and are free to export it a number of useful formats.

One of these formats is HTML (the web's markup language) – we represent our timed transcripts as HTML for a number of reasons:

🌈 Accessibility

Transcripts render and are readable without JavaScript enabled.

🌈 Readability

HTML has been designed to be human as well as machine readable.

🌈 Flexibility

Most web developers know HTML and can adapt it to their needs.

Here's a snippet:

<p data-tc="00:00:52">
  <span data-m="52890" data-d="0" class="speaker">Alexandra: </span>
  <span data-m="52890" data-d="90">I </span>
  <span data-m="52980" data-d="240">think </span>
  <span data-m="53220" data-d="720">unfortunately </span>
  <span data-m="53970" data-d="60">at </span>
  <span data-m="54030" data-d="60">the </span>
  <span data-m="54090" data-d="270">minute </span>

Hopefully this is relatively human friendly. We see the start of a paragraph containing a series of spans containing words. These spans have a start time (data-m) – in milliseconds – and duration (data-d) associated with them. (The paragraph's data-tc is optional.)

You can pretty much style these transcripts how you like - here's an example. If you view the source it should be pretty readable, and you might spot something interesting. Payment pointers.

Time for another snippet:

<article data-wm="$ilp.uphold.com/123article">
  <section data-wm="$ilp.uphold.com/123section">
    <h5 data-m="0">How do we make people more aware of their personal data?</h5>
    <p data-tc="00:00:04" data-wm="$ilp.uphold.com/123Doc">
      <span data-m="4470" data-d="0" class="speaker">Doc: </span>
      <span data-m="4470" data-d="270">We </span>
      <span data-m="4740" data-d="240">have </span>
      <span data-m="5010" data-d="300">two </span>
      <span data-m="5310" data-d="600">selves </span>

We decided to make payment pointers "portable" by making them part of the transcript itself. In the Hyperaudio Wordpress plugin (which relies upon Hyperaudio Lite) all that's required to make use of those payment pointers is to turn on Web Monetization in the plugin (or Hyperaudio Lite library) and include those pointers somewhere in your transcript, like the example above.

When playing back the media, Hyperaudio Lite checks the parent element of the current word and then the grandparent – and so on – until it finds a payment pointer. Once located that pointer is made active – thereby streaming payments to the owner of the pointer. In our example this means we could set a payment pointer for each <p> to divide payments amongst speakers. In the case that we don't have a pointer for a specific speaker (like Alexandra in the first code snippet) it will default to the next pointer it finds "above" it in the HTML.

Note – we can use a <section> element to represent component parts of a remix, so conceivably you may have some with payment pointers and others without (at which point it would default to <article>).

In the Hyperaudio for Conferences project we want allow the option to proportionally stream payments to individual speakers, including the case when conference material contains multiple speakers.

I'll finish with some videos to illustrate the concept further...

Web Monetization in Hyperaudio Lite

Web Monetization in Hyperaudio Wordpress Plugin

Feedback is always welcome!