JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<script src="https://cdn.embed.ly/player-0.1.0.min.js"></script>
<iframe width="100%" height="180" frameborder="0" title="Chris Burres - C60 Oil Supplements Overview" class="perfmatters-lazy loaded" data-src="https://omny.fm/shows/biohackers-lab/ep106-chris-burres/embed" loading="lazy" src="https://omny.fm/shows/biohackers-lab/ep106-chris-burres/embed" data-was-processed="true"></iframe>



<p><a href="#01:19" class="timestamp"><strong>[01:19]</strong></a> – Introducing, Chris Burres, owner of SES Research and the founder of MyVitalC (largest manufacturer of ESS60 in the world).</p>

<p><a href="#10:10" class="timestamp"><strong>[10:10]</strong></a> – Introducing, Chris Burres, owner of SES Research and the founder of MyVitalC (largest manufacturer of ESS60 in the world).</p>
<p><a href="#20:33" class="timestamp"><strong>[20:33]</strong></a> – Introducing, Chris Burres, owner of SES Research and the founder of MyVitalC (largest manufacturer of ESS60 in the world).</p>
<p><a href="#30:56" class="timestamp"><strong>[30:56]</strong></a> – Introducing, Chris Burres, owner of SES Research and the founder of MyVitalC (largest manufacturer of ESS60 in the world).</p>

JavaScript

console.log('HTMLTesting 1');

$(document).ready(function() {
  var player, player_el,
    $htmlBody = $('html, body');

  function update_player(player, player_el, time) {


    if (player_el) {
      var $player_el = $(player_el),
        top = $player_el.offset().top;

      $htmlBody.animate({
        scrollTop: top
      }, 500);

      time = time.split("#")[1].split(":");

      var hours, mins, secs;

      if (time.length > 2) {

        hours = parseInt(time[0]);
        mins = parseInt(time[1]);
        secs = parseInt(time[2]) + (mins * 60) + (hours * 60 * 60);

      } else {

        mins = parseInt(time[0]);
        secs = parseInt(time[1]) + (mins * 60);

      }

      player.setCurrentTime(secs);

      player_start(player);

    }

  }

  function find_player() {

    $('iframe').each(function() {

      if (this.src.indexOf("omny") > -1) {

        // assign playerjs to the iframe
        player = new playerjs.Player(this);
        player_el = this;

      }

    });

  }

  function player_start(player) {
    player.on('ready', function() {
      player.play();
      console.log('starting', player);
    });
  }

  find_player();

  var timestamps = $(".timestamp"),
    l = timestamps.length,
    hash_time = window.location.hash;

  if (hash_time) {

    if (!player) {
      find_player();
    }

    update_player(player, player_el, hash_time);

  }

  if (l) {

    if (!player) {
      find_player();
    }

    for (var i = 0; i < l; i += 1) {

      $(timestamps[i]).on("click", function(e) {

        var $this = $(this);

        e.preventDefault();

        update_player(player, player_el, $this.attr('href'));

      });

    }

  }

  $("#play_audio").on("click", function(e) {
    e.preventDefault();

    var $lister = $('#listen');

    if ($lister) {
      var scrollTo = $lister.offset().top;

      $htmlBody.animate({
        scrollTop: scrollTo
      }, 500);

      console.log('scrollTo', $lister);

    }

    find_player();

    if...