[Issue #95] Audio Player component

audio/audio.vtt

@@ -0,0 +1,152 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:14.640
+[Dramatic 1930s Orchestral Music]
+
+00:00:14.640 --> 00:00:21.840
+<v The Shadow> Who knows what evil lurks in the hearts of men?
+
+00:00:21.840 --> 00:00:24.400
+The Shadow knows!
+
+00:00:24.400 --> 00:00:27.200
+[Maniacal Laughter]
+
+00:00:27.200 --> 00:00:40.240
+[Dramatic 1930s Orchestral Music]
+
+00:00:40.240 --> 00:00:45.040
+<v Announcer> The Shadow, mysterious character who aids the forces of law and order,
+
+00:00:45.040 --> 00:00:49.200
+is in reality Lamont Cranston, wealthy young man of outstanding talent.
+
+00:00:49.200 --> 00:00:54.400
+As the shadow, Cranston is gifted with hypnotic power to cloud men's minds
+
+00:00:54.400 --> 00:00:58.720
+so that they cannot see him. Cranston's friend and companion,
+
+00:00:58.720 --> 00:01:02.800
+the lovely Margo Lane, is the only person who knows to whom the voice of the
+
+00:01:02.800 --> 00:01:09.120
+invisible Shadow belongs. Today's story: The Voice of Death.
+
+00:01:09.120 --> 00:01:16.880
+[Eerie Music]
+
+00:01:16.880 --> 00:01:17.740
+<v Annie> Sam.
+
+00:01:17.800 --> 00:01:19.633
+<v Sam> Yes, Annie?
+
+00:01:19.634 --> 00:01:22.080
+<v Annie> You almost finished reading your paper?
+
+00:01:22.080 --> 00:01:23.149
+<v Sam> Yes, Annie.
+
+00:01:23.173 --> 00:01:25.088
+<v Annie> Time to go to bed, ain't it?
+
+00:01:25.112 --> 00:01:26.640
+<v Sam> Yes, Annie.
+
+00:01:26.640 --> 00:01:31.681
+<v Annie> Better make sure all the
+windows are shut. Sounds like a real mean storm
+coming up.
+
+00:01:31.705 --> 00:01:32.952
+<v Sam> Yes, Annie.
+
+00:01:32.985 --> 00:01:35.324
+[Sound of a strong wind with meowing in background]
+
+00:01:35.372 --> 00:01:36.567
+<v Annie> Sam.
+
+00:01:36.591 --> 00:01:37.733
+<v Sam> Yes, Annie.
+
+00:01:37.757 --> 00:01:39.096
+<v Annie> Did you hear
+that?
+
+00:01:39.120 --> 00:01:40.503
+<v Sam> What?
+
+00:01:40.527 --> 00:01:41.840
+<v Annie> You hear it?
+
+00:01:41.840 --> 00:01:44.088
+Sounded just
+like little kittens.
+
+00:01:44.112 --> 00:01:47.200
+<v Sam> Yeah. Well, I
+wonder where they come from.
+
+00:01:47.200 --> 00:01:50.640
+<v Annie> Well, they're poor things, outdoors on a night like this.
+
+00:01:50.640 --> 00:01:53.036
+Sam, will you go out and
+find them? Go on, will you?
+
+00:01:53.060 --> 00:01:54.880
+<v Sam> Now, Annie, you don't...
+
+00:01:54.880 --> 00:01:59.120
+<v Annie> Just listen to them little critters. Ain't you got no heart, Sam?
+
+00:01:59.120 --> 00:02:02.188
+<v Sam> Oh, all right.
+Where's my raincoat now?
+
+00:02:02.212 --> 00:02:03.680
+<v Annie> Oh, here you are.
+
+00:02:03.680 --> 00:02:07.360
+I'll set up a little box for them by the fire.
+
+00:02:07.360 --> 00:02:10.640
+<v Sam> All right, all right. Now stop your crying, kittens. I'm coming.
+
+00:02:10.640 --> 00:02:13.093
+<v Annie> Just wait. I'll heat up a bit of milk, too.
+
+00:02:13.213 --> 00:02:16.006
+<v Sam> Here kitty, kitty, kitty, kitty!!!
+
+00:02:16.080 --> 00:02:17.761
+<v Annie> Do you see them, Sam?
+
+00:02:17.785 --> 00:02:22.088
+<v Sam> No, not yet ...  Here, kitty, kitty, kitty!  Annie, how do you ... ?
+
+00:02:22.112 --> 00:02:25.840
+[Sounds of dogs madly growling and tearing something apart]
+
+00:02:25.840 --> 00:02:29.760
+<v Annie> Sam, what's wrong? What in the name of all this fooling?
+
+00:02:29.760 --> 00:02:33.401
+Sam! Sam, what is it? Sam, what happened?
+
+00:02:33.425 --> 00:02:34.880
+[Sounds of dogs madly growling]
+
+00:02:34.880 --> 00:02:38.800
+<v Annie> Sam, blood. You're all covered with blood.
+
+00:02:38.800 --> 00:02:43.129
+[Another man murmurs something inaudible quietly]
+
+00:02:43.162 --> 00:02:49.760
+<v Annie> Sam, how could kittens do... Sam! He's dead.
+
+00:02:49.785 --> 00:02:53.710
+[Dramatic music]

content/body/acknowledgements.php

@@ -36,7 +36,7 @@
   </li>
   <li><a href="https://github.com/alisonhall">Alison Hall</a> for cleaning up and streamlining the unit testing and automated testing NPM tasks (and also doing the difficult task of updating the NPM packages within the project in 2024).
   </li>
-  <li><a href="https://github.com/akr3081">Adam Rock</a> for the <a href="/meter.php">accessible meter component</a>
+  <li><a href="https://github.com/akr3081">Adam Rock</a> for the accessible <a href="/meter.php">meter</a> and <a href="/audio-player.php">audio player</a> components
   </li>
 
   <li><a href="https://code.iamkate.com">Kate Morley</a> for her <a

content/body/audio-player.php

@@ -0,0 +1,97 @@
+<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> to display the captions.  The nice thing about AblePlayer is that it also generates a caption for those who cannot hear the video but want to read the content contained within it.  Our build of Able Player includes code to ensure that it plays correctly across various browsers/devices (installation instructions are at the bottom of this page).  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/audio.mp3" />
+      <track kind="captions" src="vtt/audio.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/audio.vtt ",
+      "notes": "WebVTT is the web standard format that all media should use for captions.  We used <a href=\"https://github.com/ggerganov/whisper.cpp\">Whisper.cpp</a>, an AI that can create captions, to do the initial work on the captions."
+    },
+    {
+      "label": "Add speaker information to the caption file.",
+      "highlight": "%FILE%vtt/audio.vtt ~ &lt;v[^;]*;",
+      "notes": "All AI generated content needs to be remediated. We used <a href=\"https://nikse.dk/SubtitleEdit/\">Subtitle Edit</a> to correct any errors in the WebVTT file and add the speaker and sound effect information to it.  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/multimedia-content.php

@@ -365,7 +365,7 @@
     it with the similar music from a different source. The results can be quite impressive.</p>
 
 <div role="figure" class="video-figure" aria-labelledby="eighth-man-video-before">
-    <div class="enable-video-player">
+    <div class="enable-media-player">
         <video data-able-player id="eighth-man-video-before__video" data-youtube-id="cJR0tBNj3uA" preload="auto"
             data-skin="2020" data-root-path="./js/enable-libs/ableplayer/" data-heading-level="3">
             <track kind="descriptions" src="vtt/clip-8th-man.vtt" srclang="en" label="English Audio Descriptions">
@@ -378,7 +378,7 @@
 </div>
 
 <div role="figure" class="video-figure" aria-labelledby="eighth-man-video-after">
-    <div class="enable-video-player">
+    <div class="enable-media-player">
         <video data-able-player id="eighth-man-video-after__video" data-youtube-id="K-B7-GS6ipM" preload="auto"
             data-skin="2020" data-root-path="./js/enable-libs/ableplayer/" data-heading-level="3">
             <track kind="descriptions" src="vtt/clip-8th-man.vtt" srclang="en" label="English Audio Descriptions">
@@ -442,7 +442,7 @@
 </ol>
 
 <div role="figure" class="video-figure" aria-labelledby="canada-covid-update-example">
-    <div class="enable-video-player">
+    <div class="enable-media-player">
         <video data-able-player id="canada-covid-update-example__video" data-youtube-id="00TbnrkLY5k" preload="auto"
             data-skin="2020" data-root-path="./js/enable-libs/ableplayer/" data-heading-level="3">
             <track kind="captions" src="vtt/covid-update.vtt" srclang="en"

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/multimedia-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/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 +1,5 @@
-<link href="css/video-player.css" rel="stylesheet">
+<link id="able-player-css" href="js/enable-libs/ableplayer/styles/ableplayer.css" rel="stylesheet" >
+<link id="enable-media-player-css" href="css/enable-media-player.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
@@ -48,5 +49,4 @@ css/textbox.css
 css/text-resize.css
 css/text-spacing.css
 css/timer.css
-css/tooltip.css
-css/video-player.css
+css/tooltip.css