Add extra player controls on Hearthis.at

bookmarklet.js

;(function() {
  const sm = window.soundManager
  const soundId = sm.soundIDs[0]

  if (!soundId) {
    alert('No sound found.')
    return
  }
  if (document.querySelector('.ext')) return

  const playBackward = -15
  const playForward = 30

  const microPlayer = document.querySelector('.micro-player')
  const container = document.createElement('li')
  const backwardButton = document.createElement('button')
  const forwardButton = document.createElement('button')
  const rateSlider = document.createElement('input')
  const style = document.createElement('style')
  const keyMap = {
    ArrowUp: playBackward,
    ArrowDown: playForward
  }

  const setPosition = (sec) => {
    sm.setPosition(soundId, sm.getSoundById(soundId).position + sec * 1000)
  }
  const rateChange = (val) => {
    sm.setPlaybackRate(soundId, val)
  }
  const onKeydown = (e) => {
    const val = keyMap[e.key]
    if (!val) return
    setPosition(val)
  }

  // controls
  backwardButton.textContent = '<<'
  forwardButton.textContent = '>>'
  rateSlider.type = 'range'
  rateSlider.min = 1
  rateSlider.max = 3
  rateSlider.value = 1
  rateSlider.step = 'any'
  rateSlider.style.width = '100px'

  container.className = 'ext'
  void [backwardButton, forwardButton, rateSlider].forEach((el) => container.appendChild(el))
  microPlayer.appendChild(container)

  // style
  style.innerHTML = `
  .ext {
    position: absolute;
    top: 10px;
    left: 100%;
    width: 100%;
  }
  .ext > * {
    display: inline-block !important;
  }
  `
  document.body.appendChild(style)

  // events
  backwardButton.addEventListener('click', () => setPosition(playBackward))
  forwardButton.addEventListener('click', () => setPosition(playForward))
  rateSlider.addEventListener('change', (e) => rateChange(e.target.value))
  window.addEventListener('keydown', onKeydown)
})()