I decided to explore the idea about monetizing mixtapes I mentioned in the first post.

To make the proof of concept as simple as possible I use SoundCloud to stream the audio. It has a nice embeddable widget as well as an API with events to detect pause and play progress.

It works like this:

• A SoundCloud widget is embedded
• A tracklist is defined to keep track of which payment pointer should be used at what time
• Get track playing and update payment pointer whenever the event PLAY_PROGRESS is triggered.
• Coil is used to monetize the payment pointer in the meta tag

// Initialize SoundCloud widget
const audio = SC.Widget(embedSoundCloud(trackId))

// Fetch tracklist
const tracklist = await fetch("tracklist.json").then(r => r.json())

// Update payment pointer in meta tag as audio is playing
audio.bind(SC.Widget.Events.PLAY_PROGRESS, ({ currentPosition }) => {
  const track = getTrack(currentPosition, tracklist);      
  setMetaTag(track.paymentPointer);
})

// Pause monetization
audio.bind(SC.Widget.Events.PAUSE, (args) => setMetaTag(""));


function setMetaTag(pointer) {
  const monetizationTag = document.querySelector('meta[name="monetization"]');
  if (monetizationTag.content === pointer) {
      return;
  }
  monetizationTag.content = pointer;
}

function getTrack(timestamp, tracklist) {
  const tracks = [...tracklist].reverse() // find last index
  const trackIndex = tracks.findIndex((t) => timestamp / 1000 > t.time)

  return tracks[trackIndex]
}

Some issues that would need to be managed:

• Each artist would need to set up a wallet and a payment pointer
• Tracklists need to be defined (I crawled from 1001tracklists.com)
• Each artist in tracklist need to point to a registered payment pointer
• Metatag only supports 1 (artist) payment pointer
• Nothing prevents a user to listen if they don't monetize
• Monetization stops when browser tab is in background

Future improvements could be:

• Move payments to a backend service and stream song position using WebSockets. This could enable payouts to multiple artists (collaborations) and songs playing at the same time (during crossfades and mashups).
• Let artists sign up for a wallet and payment pointer
• Periodically check if payments are sent to let the user keep listening

You can check it out here:
https://traveling-island-marscapone.glitch.me

And the code:
https://glitch.com/edit/#!/traveling-island-marscapone

Some thoughts on WebMonetization and ILP in general:

• Is a browser extension really needed? Why can't the user authorize a backend to send payments to a pointer?
• Could we have something like an OAuth2 flow where we allow a site to spend x amount from our wallet?