So, I am slightly obsessive compulsive.
I worked a little more tonight on this jAUs thing to add support for start and stop time attributes in the HTML5 <audio> tag.
Video should work, too, with a little work, but I don't care about that right now.
What I did tonight was make it so that if a "stopTime" attribute is used, then after that point is reached the player will move the scrubber back to the original "startTime" value though at that point the playback is already paused.
If there is no "stopTime" attribute, then after the file's played itself to the end, the scrubber will move back to the "startTime" value. Again, playback is already paused at that point.
I've tested this with Firefox 9.01, Internet Explorer 9, Safari 4.0.5, Opera 11.60, and Chrome 16.0.912.75 on my Windows 7 (32-bit) laptop.
Running everything from my desktop, I had no problems except that I should mention that if I used the "autoplay" attribute and set it to "true", Chrome didn't start the playback as it should, but it seems that maybe that's a Chrome problem that others are having, too.
Testing with the files uploaded to my hosted account was a different story. Opera seemed to need a page refresh before the scrubber would locate itself at the proper positions – though adding a pesky alert() at the beginning seemed to make Opera happy. Chrome and Safari seemed to take a few seconds to get situated, although they seemed to generally need a restart to move the scrubber to the right place for the last audio player. I didn't test the alert() thing for these two. Firefox did well although I hate the way Firefox moves the audio players around depending on whether the audio has been played or not. And that leaves IE9 … which, hands down, did the best. Maybe that's because of the exception I'd added for it as I mentioned in an earlier post.
So, there's still work to do and things to investigate.
Also, I haven't tested this with really long files or anything so I don't know how that would go. But then again, as I've heard others say, HTML5 media elements aren't really for long-form media anyway.
Oh yeah, one more thing. I did in fact change to "data-startTime" and "data-stopTime" to make the HTML legal HTML5.
Here's the HTML5 code itself, letting one see that the JavaScript has now been moved into a separate JS file.
<!DOCTYPE html>
<html>
<head>
<title>jAUs</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript" src="jAUs.js"></script>
<p>This is the entire recording of Shakespeare's Sonnet 130, read by Nathan Miller for
<a href="http://librivox.org/sonnet-130-by-william-shakespeare/">LibriVox</a>.</p>
<audio controls>
<source src="sonnet130_shakespeare_njm.mp3" type="audio/mp3" />
<source src="sonnet130_shakespeare_njm.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
<p>"My mistress' eyes are nothing like the sun." - <em>start = 10; end = 13.</em></p>
<audio class="jAUs" controls data-startTime="10" data-stopTime="13">
<source src="sonnet130_shakespeare_njm.mp3" type="audio/mp3" />
<source src="sonnet130_shakespeare_njm.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
<p>"End of poem."- <em>start = 57, no end specified.</em></p>
<audio class="jAUs" controls data-startTime="57">
<source src="sonnet130_shakespeare_njm.mp3" type="audio/mp3" />
<source src="sonnet130_shakespeare_njm.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
Oh, and here's the JavaScript file:
/*
***** Note: This software is still in ALPHA. Please refrain from using
the code without first contacting Nitin Arora at nitaro74@gmail.com.
Thanks!
*****
jAUs: JavaScript <audio> Shark.
Copyright (c) 2012 Nitin Arora.
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
jAUs is licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php.
*/
function jAUs(){
audioTagArray = document.getElementsByClassName("jAUs");
for (i=0;i<=audioTagArray.length-1;i++){
var thisAudioTag = audioTagArray[i];
jAUs_2(audioTagArray,thisAudioTag);
}
}
function jAUs_2(audioTagArray,thisAudioTag){
//if this is placed directly into jAUs() - i.e. not a separate function,
//then this whole thing doesn't seem to work.
if (navigator.appName == "Microsoft Internet Explorer"){
thisAudioTag.onloadeddata = function(){
var thisAudioTag_startTime = thisAudioTag.getAttribute("data-startTime");
thisAudioTag.currentTime = thisAudioTag_startTime;
}
}
else {
var thisAudioTag_startTime = thisAudioTag.getAttribute("data-startTime");
thisAudioTag.currentTime = thisAudioTag_startTime;
}
var thisAudioTag_stopTime = thisAudioTag.getAttribute("data-stopTime");
var stopString = "jAUs_3(this.currentTime," + thisAudioTag_stopTime + "," + i + ");";
//returns "jAUs_3(this.currentTime, 13, i);" where "i" is an int.
thisAudioTag.setAttribute("ontimeupdate",stopString);
}
function jAUs_3(this_currentTime,thisAudioTag_stopTime,i){
if (thisAudioTag_stopTime){
//if there's a data-stopTime attribute then ...
if (this_currentTime > thisAudioTag_stopTime){
//... reset audio to data-startTime when data-stopTime is reached.
audioTagArray[i].currentTime = audioTagArray[i].getAttribute("data-startTime");
audioTagArray[i].pause();
}
}
else if (audioTagArray[i].ended == true){
//if there's no data-stopTime, move back to data-startTime when playback has ended.
audioTagArray[i].currentTime = audioTagArray[i].getAttribute("data-startTime");
audioTagArray[i].pause();
}
}
window.onload = function(){
jAUs();
}
Update, January 12, 2012: Turns out "jAUs" is the name for some robotic SDK and I'm not too crazy about that name anyway. So, I'm leaning toward "m(AUj)ulate" (pronounced like 'modulate') which would stand for something like "My Untimely Little Audio Tag Extender". The word "untimely" being, of course, a play on the fact that time is what this is all about. The parenthetical bit refers to "audio" (AU) and JavaScript (j).
I might replace "My" with "Meow" in homage to one of my friend's cat. When said with a good Southern drawl, "Meow" actually isn't that different sounding than "My". By the way, the cat's name actually starts with an "M", but I don't want to have to pay the royalties.
And, yes, I care much more about the name/acronym than the script itself.
Update, January 15, 2012: OK, this is interesting. If, for the source of the audio file, I actually use the audio files on the Archive.org site for the LibriVox recordings like so …
<audio class="jAUs" controls data-startTime="10" data-stopTime="13">
<source src="http://www.archive.org/download/sonnet_130_librivox/sonnet130_shakespeare_njm_64kb.mp3" type="audio/mp3" />
<source src="http://www.archive.org/download/sonnet_130_librivox/sonnet130_shakespeare_njm.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
… then this seems to be working OK in all the browsers. Chrome seems, per casual observation, the slowest in terms of getting the scrubber moved to the appropriate points, but I guess this is progress.
Related to all this stuff I've been messing with, I found this: Consistent event firing with HTML5 video – Dev.Opera. But here, too, they use an alert() to notify the user that metadata is loaded using "onloadedmetadata", but in my tests it seems like the alert() function itself was what was fixing the inability of some browsers to set the current time as my script was instructing …
--------------
Related Content:
