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

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

<div class="speechkit-minimal-player speechkit__container js-container <% if (typeof(publisherLogo) !== 'undefined' && publisherLogo.length > 0) { %> speechkit__container--withLogo <% } %>">
  <div class="speechkit__frame">
    <div class="speechkit-minimal-player__info">
      <div class="speechkit__controls-container">
        <button type="button" class="speechkit__shared__controls__button speechkit__playpause speechkit-minimal-player__controls-playpause js-playpause"></button>
        <div class="speechkit__progressbar">
          <div class="speechkit-minimal-player__progressbar-label speechkit__progressbar-label">
            <div class="speechkit__flex-container">
              <div>
                <span class="speechkit-minimal-player__title-wrapper">
                  <span class="speechkit__shared__title speechkit-minimal-player__title js-title"><%= playerTitle %></span>
                  <% if (typeof(message) !== "undefined" && message.length > 0) { %>
                    <span class="speechkit__shared__message speechkit-minimal-player__message">-<span class="speechkit-minimal-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>
              <div class="speechkit__flex-container">
                <% var classNameExternalLink = customFeedbackURL ? 'speechkit__external-link-visible' : '' %>
                <% var styleExternalLink = customFeedbackURL ? 'style = "color: ' + publisherColor + ';"' : '' %>
                <% if (!feedbackURLIsHidden && typeof(feedbackUrl) === "undefined") { %>
                  <a class="speechkit-minimal-player__external-link speechkit__external-link <%= classNameExternalLink %>" target="_blank" href="<%= skBackend %>/rate/basic" <%= styleExternalLink %> >
                    Feedback
                  </a>
                <% } else if(!feedbackURLIsHidden){ %>
                  <a class="speechkit-minimal-player__external-link speechkit__external-link <%= classNameExternalLink %>" target="_blank" href="<%= feedbackUrl %>" <%= styleExternalLink %> >
                    Feedback
                  </a>
                <% } %>
                <div class="speechkit-minimal-player__controls-speed js-speed">
                  <%= speed1Icon %>
                </div>
              </div>
            </div>
          </div>
          <div class="speechkit-minimal-player__progressbar-container 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 class="speechkit__loading-progressbar js-loading-progress"></div>
              </div>
            </div>
          </div>
          <div class="speechkit__flex-container">
            <div class="speechkit-minimal-player__time-wrapper">
              <span class="speechkit__shared__ads-note js-ads-note">Article will play in </span>
              <span class="speechkit-minimal-player__time js-time">00:00</span>
            </div>
            <% if (!SKLinkIsHidden) { %>
              <a class="speechkit-minimal-player__external-link speechkit__external-link" href="https://speechkit.io">
                Powered by SpeechKit
              </a>
            <% } %>
            <% if (downloadLink) { %>
              <span class="speechkit-minimal-player__download-link"><%= downloadLink %></span>
            <% } %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>