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

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

<div class="speechkit__container js-container <% if (typeof(publisherLogo) !== "undefined" && publisherLogo.length > 0) { %> speechkit__container--withLogo <% } %>">
  <div class="speechkit-embedded-player__frame speechkit__frame">
    <div class="speechkit-embedded-player__info">
      <% if (typeof(publisherLogo) !== "undefined" && publisherLogo.length > 0) { %>
        <div class="speechkit__shared__publisher-logo speechkit-embedded-player__logo">
          <img class="speechkit__shared__controls__logo" src="<%= publisherLogo %>" />
        </div>
      <% } %>
      <a class="speechkit-embedded-player__logo speechkit__shared__controls__advertiser-logo js-advertiser-logo" target="_blank">
        <img class="speechkit__shared__controls__logo speechkit__shared__controls__advertiser-logo-img" />
      </a>
    </div>
    <div class="speechkit__controls-container">
      <button type="button" class="speechkit__shared__controls__button speechkit__playpause speechkit-embedded-player__controls-playpause js-playpause"></button>
      <div class="speechkit-embedded-player__progressbar speechkit__progressbar">
        <div class="speechkit-embedded-player__progressbar-label speechkit__progressbar-label">
          <span class="speechkit-embedded-player__title-wrapper">
            <span class="speechkit__shared__title speechkit-embedded-player__title js-title"><%= playerTitle %></span>
            <% if (typeof(message) !== "undefined" && message.length > 0) { %>
              <span class="speechkit-embedded-player__message">-<span class="speechkit-embedded-player__message-text"><%= message %></span></span>
            <% } %>
            <span class="speechkit__shared__title--advertiser js-advertiser-title">
              <span class="speechkit__shared__adveritser-note js-advertiser-note">Audio sponsored by </span><a class="link-dark js-advertiser-link" target="_blank"><span class="js-advertiser-name"></span></a>
            </span>
          </span>
          <div class="speechkit-embedded-player__time-wrapper">
            <span class="speechkit__shared__ads-note js-ads-note">Article will play in </span>
            <% if (downloadLink) { %>
              <span class="speechkit-embedded-player__download-link"><%= downloadLink %></span>
            <% } else { %>
              <span class="speechkit__shared__icon speechkit-embedded-player__robot-icon"><%= robotIcon %></span>
            <% } %>
            <span class="speechkit-embedded-player__time js-time">
              00:00
            </span>
          </div>
          <% if (typeof(message) !== "undefined" && message.length > 0) { %>
            <div class="speechkit-embedded-player__message-text speechkit-embedded-player__message--small"><%= message %></div>
          <% } %>
        </div>
        <div class="speechkit__progressbar-container">
          <div class="speechkit__progressbar-bar-wrapper js-bar-wrapper">
            <div class="speechkit__progressbar-bar">
              <div class="speechkit__progressbar-progress js-progress"></div>
            </div>
          </div>
        </div>
        <div class="speechkit-embedded-player__controls-info">
          <a class="speechkit__external-link" href="https://speechkit.io">
            Powered by SpeechKit
          </a>
          <% if (typeof(feedbackUrl) === "undefined") { %>
            <a class="speechkit__external-link" target="_blank" href="<%= skBackend %>/rate/basic">
              Feedback
            </a>
          <% } else { %>
            <a class="speechkit__external-link" target="_blank" href="<%= feedbackUrl %>">
              Feedback
            </a>
          <% } %>
        </div>
      </div>
      <div class="speechkit-embedded-player__links">
        <% if (typeof(podcastUrl) !== "undefined" && podcastUrl.length > 0) { %>
          <a href="<%= podcastUrl || '#' %>" target="_blank" class="speechkit__shared__controls__button speechkit-embedded-player__controls-forward">
            <%= podcastButton %>
          </a>
        <% } else { %>
          <div class="speechkit-embedded-player__controls-forward"></div>
        <% } %>
        <div class="speechkit-embedded-player__controls-speed js-speed">1
          <small>X</small>
        </div>
      </div>
    </div>
  </div>