JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="playList">
  <h2>Play List</h2>
  <ul>
    <li>
      <label>HE-AAC Channel ID Test (MPEG)</label>
      <button class="playButton" data-src="https://www2.iis.fraunhofer.de/AAC/ChID-BLITS-EBU-Narration.mp4">Play</button>
    </li>
    <li>
      <label>HE-AAC Channel ID Test (WAV)</label>
      <button class="playButton" data-src="https://www2.iis.fraunhofer.de/AAC/ChID-BLITS-EBU-Narration441-16b.wav">Play</button>
    </li>
    <li>
      <label>Carl Philipp Emanuel Bach (WMA)</label>
      <button class="playButton" data-src="http://www.theflute.co.uk/media/BachCPE_SonataAmin_1.wma">Play</button>
    </li>
  </ul>
</div>

CSS

#playList ul {
  margin: 25px;
  padding: 0;
}

#playList ul li {
  list-style: none;
}

#playList ul li label {
  width: 250px;
  display: inline-block;
}

#playList ul li button.playButton {
  width: 16px;
  height: 16px;
}

JavaScript

$(function() {
  function showType(fn) {
    var ext = fn.substr(fn.lastIndexOf(".") + 1);
    var ft = "";
    switch (ext) {
      case "mp3":
        ft = "audio/mpeg";
        break;
      case "mp4":
      case "m4a":
      case ".aac":
        ft = "audio/mp4";
        break;
      case "ogg":
      case "oga":
        ft = "audio/ogg";
        break;
      case "wav":
        ft = "audio/wav";
        break;
    }
    return ft;
  }

  $(".playButton").button({
    icon: "	ui-icon-play",
    showLabel: false
  });

  $("#playList").on("click", ".playButton", function(e) {
    var audioSrc = $(this).data("src");
    var playWin = $("<div>", {
      id: "divPlayer"
    });
    var mediaPlayer = $("<audio>", {
      width: 320,
      height: 40,
      id: "mediaPlayer",
      autoplay: true,
      controls: true,
      preload: "auto",
      src: audioSrc
    });
    var mediaSource = $("<source>", {
      src: audioSrc,
      type: showType(audioSrc)
    });
    mediaPlayer.append(mediaSource);
    if (showType(audioSrc) == "") {
      var mediaObject = $("<object>", {
        width: 320,
        height: 40,
        classid: "CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
      });
      var params = {
        Filename: audioSrc,
        AutoStart: true,
        ShowControls: false,
        ShowStatusBar: false,
        ShowDisplay: false
      }
      $.each(params, function(k, v) {
        mediaObject.append("<param name='" + k + "' value='" + v + "' />");
      });
      var embedObj = $("<embed>", {
        id: 'altMediaPlayer',
        type: "application/x-mplayer2",
        pluginspage: "http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/",
        width: "320",
        height: "40",
        src: audioSrc,
        filename: audioSrc,
        autostart: true,
        showcontrols: true,
        showstatusbar: false,
        showdisplay: true
      });
      mediaObject.append(embedObj);
      mediaPlayer.append(mediaObject);
    }
   ...