[Issue #95] Audio Player component

content/body/audio-player.php

@@ -0,0 +1,94 @@
+<p>Making an audio player accessible entails meeting a number of different requirements. 
+  As defined by the <a href="https://www.w3.org/WAI/media/av/player/">WCAG</a>, it is recommended that a media player do the following:</p>
+
+<ul>
+  <li>Provide full keyboard support with proper label for screen readers.</li>
+  <li>Ensure all controls have proper contrast and clear focus indicators.</li>
+  <li>Include playback speed controls for those with cognitive disabilities.</li>
+  <li>Support for captions/subtitles (see our breakdown of this on the <a href="/video-player.php">Accessible Video Player</a> page).</li>
+</ul>
+
+<p>
+  Due to the general complexity of this issue, it is recommended to use our custom build of <a href="https://ableplayer.github.io/ableplayer/">Able Player</a> and have the browser the audio descriptions.
+  This build includes code to ensure that Able Player plays correctly across various browsers/devices. 
+  Providing a WebVTT caption file ensures that Able Player reads these captions at the correct timestamp. 
+</p>
+
+
+<h2>Accessible Audio Player using Able Player</h2>
+
+
+<div id="example1">
+  <div class="enable-media-player">
+    <audio id="audio1" preload="auto" data-able-player data-skin="2020" data-root-path="./js/enable-libs/ableplayer/" data-heading-level="3">
+      <source type="audio/mpeg" src="audio/example.mp3" />
+      <track kind="captions" src="vtt/dialog-document__html5.vtt" srclang="en" label="English Captions" />
+    </audio>
+  </div>
+</div>
+
+<?php includeShowcode("example1"); ?>
+<script type="application/json" id="example1-props">
+{
+  "replaceHtmlRules": {},
+  "steps": [
+    {
+      "label": "Add the data-able-player attribute to the audio tag.",
+      "highlight": "data-able-player",
+      "notes": "This tells the AblePlayer script that this media should be displayed with AblePlayer"
+    },
+    {
+      "label": "Add appropriate heading level",
+      "highlight": "data-heading-level",
+      "notes": [
+        "<p>This dictates the (visually-hidden) heading level that is produced by JavaScript for the media player.",
+        "According to the code comments:</p>",
+        "<blockquote><em>By default, an off-screen heading is automatically added to the top of the media player",
+        "It is intelligently assigned a heading level based on context, via misc.js &gt; ",
+        "<code>getNextHeadingLevel()</code>.",
+        "Authors can override this behavior by manually assigning a heading level using ",
+        "<code>data-heading-level</code>",
+        "Accepted values are 1-6, or 0 which indicates \"no heading\"",
+        "(i.e., author has already hard-coded a heading before the media player; Able Player doesn't ",
+        "need to do this)</em></blockquote>"
+      ]
+    },
+    {
+      "label": "Include the source tag with audio content",
+      "highlight": "%OPENTAG%source",
+      "notes": "The <code>src</code> attribute can either point to a local file or the URL of an audio file"
+    },
+    {
+      "label": "Add the caption vtt file URL",
+      "highlight": "%OPENTAG%track",
+      "notes": "Note that <code>kind</code> attribute should be set to <code>captions</code> for closed captions."
+    },
+    {
+      "label": "Write the captions track",
+      "highlight": "%FILE%vtt/dialog-document__html5.vtt",
+      "notes": "WebVTT is the web standard format that all media should use for captions.  <a href=\"https://nikse.dk/SubtitleEdit/\">Subtitle Edit</a> was the tool used to create all the WebVTT files on this page.  Although it is a Windows program, there are <a href=\"https://www.nikse.dk/SubtitleEdit/Help#linux\">instructions on how to run Subtitle Edit on Linux</a>."
+    },
+    {
+      "label": "Add AblePlayer customizations",
+      "highlight": "%JS%ablePlayerCustomizations ||| //[^<]*",
+      "notes": ""
+    }
+  ]
+}
+</script>
+
+
+<?= includeNPMInstructions(
+    "ablePlayerCustomizations",
+    [],
+    "",
+    false,
+    [
+        "otherImports" =>
+            "// AblePlayer uses this module, available via NPM<br/>import Cookies from 'js-cookie';",
+    ],
+    null,
+    false,
+    true,
+) ?>
+

content/body/pause-anim-control.php

@@ -430,7 +430,7 @@
 
 
   <div id="ableplayer-example">
-    <div class="enable-video-player">
+    <div class="enable-media-player">
       <video playsinline data-able-player id="video1" data-youtube-id="NINogq4BS68" preload="auto" data-skin="2020"
         data-root-path="./js/enable-libs/ableplayer/" data-heading-level="4">
         <track kind="captions" src="vtt/dialog-document__html5.vtt" srclang="en" label="English">

content/body/video-player.php

@@ -43,7 +43,7 @@
 
 
 <div id="example1">
-  <div class="enable-video-player">
+  <div class="enable-media-player">
     <video data-able-player id="video1" data-youtube-id="NINogq4BS68" preload="auto" data-skin="2020"
       data-root-path="./js/enable-libs/ableplayer/" data-heading-level="3">
       <track kind="captions" src="vtt/dialog-document__html5.vtt" srclang="en" label="English">

content/bottom/audio-player.php

@@ -0,0 +1 @@
+<script src="js/demos/audio-player.js" type="module"></script>

content/head/audio-player.php

@@ -0,0 +1,4 @@
+<link id="able-player-css" href="js/enable-libs/ableplayer/styles/ableplayer.css" rel="stylesheet" >
+<link id="enable-media-player-css" href="css/ablePlayerCustomizations.css" rel="stylesheet" >
+<link href="css/figure.css" rel="stylesheet">
+<link href="css/table.css" rel="stylesheet">

content/head/pause-anim-control.php

@@ -1,5 +1,5 @@
 <link id="able-player-css" href="js/enable-libs/ableplayer/styles/ableplayer.css" rel="stylesheet" >
-<link id="enable-video-player-css" href="css/video-player.css" rel="stylesheet" >
+<link id="enable-media-player-css" href="css/enable-media-player.css" rel="stylesheet" >
 <style>
     #elastic-collision-demo__canvas {
         width: 100%;

content/head/video-content.php

@@ -1,5 +1,5 @@
 <link id="able-player-css" href="js/enable-libs/ableplayer/styles/ableplayer.css" rel="stylesheet" >
-<link id="enable-video-player-css" href="css/ablePlayerCustomizations.css" rel="stylesheet" >
+<link id="enable-media-player-css" href="css/ablePlayerCustomizations.css" rel="stylesheet" >
 <link href="css/figure.css" rel="stylesheet">
 <link href="css/table.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/definition-term.css" >

content/head/video-player.php

@@ -1,4 +1,4 @@
 <link id="able-player-css" href="js/enable-libs/ableplayer/styles/ableplayer.css" rel="stylesheet" >
-<link id="enable-video-player-css" href="css/ablePlayerCustomizations.css" rel="stylesheet" >
+<link id="enable-media-player-css" href="css/ablePlayerCustomizations.css" rel="stylesheet" >
 <link href="css/figure.css" rel="stylesheet">
 <link href="css/table.css" rel="stylesheet">

css-list.txt

@@ -15,6 +15,7 @@ css/dialog-html5.css
 css/dropdown.css
 css/enable-carousel.css
 css/enable-listbox.css
+css/enable-media-player.css
 css/enable-visible-on-focus.css
 css/figure.css
 css/form.css
@@ -49,4 +50,3 @@ css/text-resize.css
 css/text-spacing.css
 css/timer.css
 css/tooltip.css
-css/video-player.css

css/ablePlayerCustomizations.css

@@ -5,56 +5,57 @@
   font-size: 1.25rem;
   border-bottom: double 3px #000;
 }
-.enable-video-player .able-wrapper {
+.enable-media-player .able-wrapper {
   max-width: initial !important;
+  z-index: 0;
 }
-.enable-video-player .able-descriptions {
+.enable-media-player .able-descriptions {
   display: none !important;
   border: solid 1px red;
 }
-.enable-video-player .able-status-bar {
+.enable-media-player .able-status-bar {
   height: 2.4em;
   min-height: 2.4em;
 }
-.enable-video-player * {
+.enable-media-player * {
   box-sizing: content-box;
 }
-.enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
+.enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
   max-width: 100% !important;
   left: auto !important;
   top: auto !important;
   position: relative !important;
   margin: 0 auto;
 }
-.enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area .able-alert {
+.enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area .able-alert {
   display: none !important;
 }
 @media only screen and (min-width: 720px) {
-  .enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible {
+  .enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible {
     width: calc(50% - 20px);
     display: inline-block;
     margin-right: 20px;
   }
-  .enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
+  .enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
     width: calc(50% - 2px) !important;
     max-width: calc(50% - 2px) !important;
     display: inline-block;
     vertical-align: top;
     margin-top: 1em;
   }
 }
-.enable-video-player .able-media-container iframe {
+.enable-media-player .able-media-container iframe {
   width: 100%;
 }
-.enable-video-player .able-media-container iframe:focus {
+.enable-media-player .able-media-container iframe:focus {
   outline: solid 2px #097efb !important;
   outline-offset: -2px;
 }
-.enable-video-player .able-media-container iframe:focus:not(:focus-visible) {
+.enable-media-player .able-media-container iframe:focus:not(:focus-visible) {
   outline: solid 2px #097efb !important;
   outline-offset: -2px;
 }
-.enable-video-player .able-media-container iframe:focus-visible {
+.enable-media-player .able-media-container iframe:focus-visible {
   outline: solid 2px #097efb !important;
   outline-offset: -2px;
 }

css/video-player.css → css/enable-media-player.css

@@ -12,59 +12,59 @@
   font-size: 1.25rem;
   border-bottom: double 3px #000;
 }
-.enable-video-player .able-wrapper {
+.enable-media-player .able-wrapper {
   max-width: initial !important;
 }
-.enable-video-player .able-descriptions {
+.enable-media-player .able-descriptions {
   display: none !important;
   border: solid 1px red;
 }
-.enable-video-player .able-status-bar {
+.enable-media-player .able-status-bar {
   height: 2.4em;
   min-height: 2.4em;
 }
-.enable-video-player * {
+.enable-media-player * {
   box-sizing: content-box;
 }
-.enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
+.enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
   max-width: 100% !important;
   left: auto !important;
   top: auto !important;
   position: relative !important;
   margin: 0 auto;
 }
-.enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area .able-alert {
+.enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area .able-alert {
   display: none !important;
 }
 @media only screen and (min-width: 720px) {
-  .enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible {
+  .enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible {
     width: calc(50% - 20px);
     display: inline-block;
     margin-right: 20px;
   }
-  .enable-video-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
+  .enable-media-player .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible + .able-transcript-area {
     width: calc(50% - 2px) !important;
     max-width: calc(50% - 2px) !important;
     display: inline-block;
     vertical-align: top;
     margin-top: 1em;
   }
 }
-.enable-video-player .able-media-container iframe {
+.enable-media-player .able-media-container iframe {
   width: 100%;
 }
-.enable-video-player .able-media-container iframe:focus {
+.enable-media-player .able-media-container iframe:focus {
   outline: solid 2px #097efb;
   outline-offset: -2px;
 }
-.enable-video-player .able-media-container iframe:focus:not(:focus-visible) {
+.enable-media-player .able-media-container iframe:focus:not(:focus-visible) {
   outline: none;
 }
-.enable-video-player .able-media-container iframe:focus-visible {
+.enable-media-player .able-media-container iframe:focus-visible {
   outline: solid 2px #097efb;
   outline-offset: -2px;
 }
-.enable-video-player .able-media-container iframe *:focus-visible {
+.enable-media-player .able-media-container iframe *:focus-visible {
   outline-style: solid;
 }
 .compliance-table {

js/demos/audio-player.js

@@ -0,0 +1,8 @@
+import showcode from '../enable-libs/showcode.js';
+import {
+    ablePlayerCustomizations,
+    AblePlayerInstances,
+} from '../modules/ablePlayerCustomizations.js';
+
+showcode.addJsObj('AblePlayerInstances', AblePlayerInstances);
+showcode.addJsObj('ablePlayerCustomizations', ablePlayerCustomizations);

js/enable-libs/ableplayer/build/ableplayer.js

@@ -1600,6 +1600,7 @@ var AblePlayerInstances = [];
 		else if (this.mediaType === 'audio') {
 			var groups = [];
 			groups.push('keyboard');
+			groups.push('captions');
 			if (this.lyricsMode) {
 				groups.push('transcript');
 			}
@@ -1783,6 +1784,28 @@ var AblePlayerInstances = [];
 				'default': 0 // off because clicking an icon to see the sign window has a powerful impact
 			});
 
+		} else if (this.mediaType === 'audio') {
+			// Caption preferences
+			prefs.push({
+				'name': 'prefCaptions', // closed captions default state
+				'label': null,
+				'group': 'captions',
+				'default': 1
+			});
+
+			prefs.push({
+				'name': 'prefCaptionsPosition',
+				'label': this.tt.prefCaptionsPosition,
+				'group': 'captions',
+				'default': this.defaultCaptionsPosition
+			});
+
+			prefs.push({
+				'name': 'prefCaptionsFont',
+				'label': this.tt.prefCaptionsFont,
+				'group': 'captions',
+				'default': 'sans-serif'
+			});
 		}
 		return prefs;
 	};
@@ -3412,6 +3435,11 @@ var AblePlayerInstances = [];
 				'class' : 'able-vidcap-container'
 			});
 			this.$vidcapContainer = this.$mediaContainer.wrap(vidcapContainer).parent();
+		} else if (this.mediaType === 'audio') {
+			vidcapContainer = $('<div>',{
+				'class' : 'able-vidcap-container'
+			});
+			this.$vidcapContainer = this.$mediaContainer.wrap(vidcapContainer).parent();
 		}
 		this.injectPlayerControlArea();
 		this.injectTextDescriptionArea();
@@ -4240,7 +4268,7 @@ var AblePlayerInstances = [];
 			playbackSupported = false;
 		}
 
-		if (this.mediaType === 'video') {
+		if (this.mediaType === 'video' || this.mediaType === 'audio') {
 			numA11yButtons = 0;
 			if (this.hasCaptions) {
 				numA11yButtons++;
@@ -5552,7 +5580,7 @@ var AblePlayerInstances = [];
 
 		// Currently only showing captions for video, not audio 
 		// TODO: Revisit this to enable captions for audio 
-		if (this.mediaType === 'video') {
+		if (this.mediaType === 'video' || this.mediaType === 'audio') {
 
 			if (!(this.usingYouTubeCaptions || this.usingVimeoCaptions)) {
 				// create a pair of nested divs for displaying captions

js/enable-libs/ableplayer/styles/ableplayer.css

@@ -756,7 +756,7 @@ span.able-modkey {
   /* max-width: 100%; */
   z-index: 8000;
 }
-.able-sign-window video {
+.able-sign-window video, audio {
   width: 100%;
 }
 .able-sign-window:focus {