@speechkit/speechkit-audio-player/src/players/PlaylistPlayer/view/view.html

A web player component that can play audio from https://speechkit.io

<div class="speechkit__container">
  <div class="speechkit-playlist">
    <div class="speechkit-playlist__container">
      <div class="speechkit-playlist__top">
        <% if (hasPublisherLogo) { %>
          <div class="speechkit-playlist__logo">
            <img class="speechkit-playlist__logo-img" src="<%= publisherLogo %>" />
          </div>
        <% } %>
        <a class="speechkit-playlist__logo speechkit-playlist__ads speechkit__shared__controls__advertiser-logo js-advertiser-logo" target="_blank">
          <img class="speechkit-playlist__logo-img speechkit__shared__controls__advertiser-logo-img" />
        </a>
        <div class="speechkit-playlist__titles">
            <% var publisherText = podcast.author ? podcast.author : publisher %>
          <div class="speechkit-playlist__publisher speechkit__shared__title"><%= publisherText %></div>
          <span class="speechkit__shared__title--advertiser">
            <a class="speechkit-playlist__publisher speechkit__external-link js-advertiser-name js-advertiser-link" target="_blank"></a>
          </span>

          <div class="speechkit-playlist__title speechkit__shared__title js-title"><%= podcast.title %></div>
          <a class="speechkit-playlist__title speechkit__external-link js-ads-title js-advertiser-link" target="_blank"></a>
          <a class="speechkit-playlist__external-link speechkit__external-link" href="https://speechkit.io">Powered by SpeechKit</a>

          <div class="speechkit-playlist__controls">
              <div class="speechkit-playlist__play">
                <button type="button" class="speechkit__shared__controls__button speechkit-playlist__playpause js-playpause"></button>
              </div>
              <div class="speechkit-playlist__progressbar <%= hasPublisherLogo ? "full-width" : "" %>">
                <div class="speechkit__progressbar-container">
                  <div class="speechkit__progressbar-bar-wrapper js-bar-wrapper">
                    <div class="speechkit__progressbar-bar speechkit-playlist__progressbar-bar">
                      <div class="speechkit__progressbar-progress js-progress"></div>
                      <div class="speechkit__loading-progressbar js-loading-progress"></div>
                    </div>
                  </div>
                </div>

                <div class="speechkit-playlist__time">
                  <span class="js-time">00:00</span> / <%= totalDuration %>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>

    <div class="speechkit-playlist__podcasts">
      <div class="speechkit-playlist__podcasts-title">Playlist</div>
      <ul class="speechkit-playlist__list js-playlist-box">
        <% forEach(podcasts, function(podcast, index) { %>
        <li class="speechkit-playlist__list-item <%= currentPlaylistPodcastIndex === index ? "speechkit-playlist__list-item--current" : "" %> js-playlist-item">
          <button type="button" class="speechkit__shared__controls__button speechkit-playlist__play-podcast js-playlist-play" data-index="<%= index %>"></button>
          <span class="speechkit-playlist__item-name"><%= podcast.title %></span>
          <span class="speechkit-playlist__date"><%= formatDate(podcast.media[0].created_at) %></span>
        </li>
        <% }); %>
      </ul>
    </div>
  </div>
</div>