Skip to content

Commit 3caa13a

Browse files
terrillterrill
committed
Add iframe support for Steno Mode
1 parent b8b08e0 commit 3caa13a

12 files changed

Lines changed: 187 additions & 14 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ The following attributes are supported on both the `<audio>` and `<video>` eleme
214214
- **data-skin** - optional; "legacy (default) or "2020". The default skin has two rows of controls, with the seekbar positioned in available space within the top row. The "2020" skin, introduced in version 4.2, has all buttons in one row beneath a full-width seekbar.
215215
- **data-speed-icons** - optional; "animals" (default) or "arrows". The default setting uses a turtle icon for *slower* and a rabbit icon for *faster*. Setting this to "arrows" uses the original Able Player icons (prior to version 3.5), arrows pointing up for *faster* and down for *slower*.
216216
- **data-start-time** - optional; time at which you want the audio to start playing (in seconds)
217+
- **data-steno-iframe-id** - optional; id of an iframe in which users will be typing with steno-mode enabled (see next item).
217218
- **data-steno-mode** - optional; "true" to allow keyboard shortcuts for controlling the player remotely within textarea form fields, e.g., for transcribing media content.
218219
- **data-volume** - optional; set the default volume (0 to 10; default is 7 to avoid overpowering screen reader audio)
219220
- **data-seek-interval** - optional; interval (in seconds) of forward and rewind buttons. By default, seek interval is intelligently calculated based on duration of the media.

‎build/ableplayer.dist.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ var AblePlayerInstances = [];
6464
// Parameters are:
6565
// media - jQuery selector or element identifying the media.
6666
window.AblePlayer = function(media) {
67+
68+
69+
var thisObj = this;
70+
6771
// Keep track of the last player created for use with global events.
6872
AblePlayer.lastCreated = this;
6973
this.media = media;
@@ -471,6 +475,16 @@ var AblePlayerInstances = [];
471475
// so users can control the player while transcribing
472476
if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) {
473477
this.stenoMode = true;
478+
// Add support for stenography in an iframe via data-steno-iframe-id
479+
if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") {
480+
this.stenoFrame = $(media).data('steno-iframe-id');
481+
$('#' + this.stenoFrame).on('load',function() {
482+
thisObj.stenoFrameContents = $(this).contents();
483+
});
484+
}
485+
else {
486+
this.stenoFrame = null;
487+
}
474488
}
475489
else {
476490
this.stenoMode = false;
@@ -12367,7 +12381,6 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
1236712381

1236812382
// if user presses a key from anywhere on the page, show player controls
1236912383
$(document).keydown(function(e) {
12370-
1237112384
if (thisObj.controlsHidden) {
1237212385
thisObj.fadeControls('in');
1237312386
thisObj.controlsHidden = false;
@@ -12397,12 +12410,18 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
1239712410
// handle local keydown events if this isn't the only player on the page;
1239812411
// otherwise these are dispatched by global handler (see ableplayer-base,js)
1239912412
this.$ableDiv.keydown(function (e) {
12400-
1240112413
if (AblePlayer.nextIndex > 1) {
1240212414
thisObj.onPlayerKeyPress(e);
1240312415
}
1240412416
});
1240512417

12418+
// If stenoMode is enabled in an iframe, handle keydown events from the iframe
12419+
if (this.stenoMode && this.stenoFrame && (typeof this.stenoFrameContents !== 'undefined')) {
12420+
this.stenoFrameContents.on('keydown',function(e) {
12421+
thisObj.onPlayerKeyPress(e);
12422+
});
12423+
};
12424+
1240612425
// transcript is not a child of this.$ableDiv
1240712426
// therefore, must be added separately
1240812427
if (this.$transcriptArea) {

‎build/ableplayer.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ var AblePlayerInstances = [];
6464
// Parameters are:
6565
// media - jQuery selector or element identifying the media.
6666
window.AblePlayer = function(media) {
67+
68+
69+
var thisObj = this;
70+
6771
// Keep track of the last player created for use with global events.
6872
AblePlayer.lastCreated = this;
6973
this.media = media;
@@ -471,6 +475,16 @@ var AblePlayerInstances = [];
471475
// so users can control the player while transcribing
472476
if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) {
473477
this.stenoMode = true;
478+
// Add support for stenography in an iframe via data-steno-iframe-id
479+
if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") {
480+
this.stenoFrame = $(media).data('steno-iframe-id');
481+
$('#' + this.stenoFrame).on('load',function() {
482+
thisObj.stenoFrameContents = $(this).contents();
483+
});
484+
}
485+
else {
486+
this.stenoFrame = null;
487+
}
474488
}
475489
else {
476490
this.stenoMode = false;
@@ -12367,7 +12381,6 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
1236712381

1236812382
// if user presses a key from anywhere on the page, show player controls
1236912383
$(document).keydown(function(e) {
12370-
1237112384
if (thisObj.controlsHidden) {
1237212385
thisObj.fadeControls('in');
1237312386
thisObj.controlsHidden = false;
@@ -12397,12 +12410,18 @@ if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml
1239712410
// handle local keydown events if this isn't the only player on the page;
1239812411
// otherwise these are dispatched by global handler (see ableplayer-base,js)
1239912412
this.$ableDiv.keydown(function (e) {
12400-
1240112413
if (AblePlayer.nextIndex > 1) {
1240212414
thisObj.onPlayerKeyPress(e);
1240312415
}
1240412416
});
1240512417

12418+
// If stenoMode is enabled in an iframe, handle keydown events from the iframe
12419+
if (this.stenoMode && this.stenoFrame && (typeof this.stenoFrameContents !== 'undefined')) {
12420+
this.stenoFrameContents.on('keydown',function(e) {
12421+
thisObj.onPlayerKeyPress(e);
12422+
});
12423+
};
12424+
1240612425
// transcript is not a child of this.$ableDiv
1240712426
// therefore, must be added separately
1240812427
if (this.$transcriptArea) {

‎build/ableplayer.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/audio9.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@
5252

5353
<h1>Able Player Audio Demo #9:<br/>Audio player on a page with form fields in "Steno Mode"</h1>
5454

55+
<p>See also <a href="audio9b.html">Audio Demo 9b</a> for a variation on this page, with the form in an iframe.</p>
56+
5557
<p>For additional demos see the <a href="index.html">Index of <em>Able Player</em> Examples</a>.</p>
5658

5759
<!-- use the following markup for each media element -->

‎demos/audio9b-form.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sample Steno Form</title>
6+
<style>
7+
body {
8+
font-family: Arial, Helvetica, sans-serif;
9+
color: black;
10+
font-size: 1em;
11+
line-height: 1.5em;
12+
}
13+
#form div {
14+
margin: 1em;
15+
}
16+
#form label, #form input {
17+
display: block;
18+
margin-bottom: 0.5em;
19+
font-size: 1em;
20+
}
21+
#form label {
22+
font-weight: bold;
23+
}
24+
#form textarea {
25+
width: 95%;
26+
max-width: 70em;
27+
height: 10em;
28+
font-family: Arial, Helvetica, sans-serif;
29+
font-size: 1em;
30+
}
31+
#form input[type="reset"] {
32+
/* padding: 0.15em; */
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
38+
<div id="form">
39+
<div>
40+
<label for="transcriber">Name of transcriber:</label>
41+
<input type="text" id="transcriber">
42+
</div>
43+
<div>
44+
<label for="transcript">Transcript:</label>
45+
<textarea id="transcript"></textarea>
46+
</div>
47+
<div>
48+
<input type="reset" id="reset">
49+
</div>
50+
</div>
51+
52+
<script>
53+
var resetButton = document.getElementById('reset');
54+
resetButton.addEventListener('click', function() {
55+
document.getElementById('transcriber').value = '';
56+
document.getElementById('transcript').value = '';
57+
});
58+
</script>
59+
</body>
60+
</html>

‎demos/audio9b.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Able Player Audio Demo #9b</title>
6+
<link rel="stylesheet" href="demos.css" type="text/css">
7+
8+
<!-- Dependencies -->
9+
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
10+
<script src="../thirdparty/js.cookie.js"></script>
11+
12+
<!-- Able Player CSS -->
13+
<link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>
14+
15+
<!-- Able Player JavaScript -->
16+
<script src="../build/ableplayer.js"></script>
17+
18+
<style>
19+
iframe {
20+
width: 75%;
21+
height: 25em;
22+
}
23+
</style>
24+
25+
</head>
26+
27+
<body>
28+
29+
<h1>Able Player Audio Demo #9b:<br/>Audio player on a page with form fields in an iframe, using "Steno Mode"</h1>
30+
31+
<p>This is a variation on <a href="audio9.html">Audio Demo 9</a>, which does not use an iframe.</p>
32+
33+
<p>For additional demos see the <a href="index.html">Index of <em>Able Player</em> Examples</a>.</p>
34+
35+
<!-- use the following markup for each media element -->
36+
<audio id="audio1" width="480" preload="auto" data-able-player data-skin="2020" data-steno-mode data-steno-iframe-id="myIframe">
37+
<source type="audio/mpeg" src="../media/smallf.mp3"/>
38+
<source type="audio/ogg" src="../media/smallf.ogg"/>
39+
</audio>
40+
41+
<h2>Audio Transcription Example</h2>
42+
43+
<p>Ordinarily, when users are interacting with form fields, their keystrokes should not be handled by the player.
44+
However, in some contexts (e.g., in a transcription application), users may want to control the player
45+
from within a textarea field. To enable this functionality, add <strong>data-steno-mode</strong> to the &lt;audio&gt; or &lt;video&gt; element. Note: Modifier keys for keyboard shortcuts can be configured within <em>Preferences > Keyboard</em>.</p>
46+
<p>In this variation, the transcription form is contained within an iframe. To make this work, the *&lt;iframe&gr; element must have a unique id. Then add <strong>data-steno-iframe-id</strong> to the &lt;audio&gt; or &lt;video&gt; element, with a value that matches the id of the iframe.</p>
47+
48+
49+
<iframe id="myIframe" src="audio9b-form.html" title="Sample Steno Form"></iframe>
50+
51+
</body>
52+
</html>

‎demos/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ <h2>Audio Examples</h2>
2929
<li><a href="audio7.html">Multiple audio players (each with its own playlist)</a></li>
3030
<li><a href="audio8.html">Audio Player on a page with form fields</a></li>
3131
<li><a href="audio9.html">Audio Player on a page with form fields in "Steno Mode"</a></li>
32+
<li><a href="audio9b.html">Audio Player and "Steno Mode", with form fields in an iframe</a></li>
3233
</ol>
3334

3435
<h2>Video Examples</h2>

‎package-lock.json‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ableplayer",
3-
"version": "4.3.3",
3+
"version": "4.3.4",
44
"description": "fully accessible HTML5 media player",
55
"homepage": "http://ableplayer.github.io/ableplayer",
66
"bugs": "https://github.com/ableplayer/ableplayer/issues",

0 commit comments

Comments
 (0)