Would you like to automatically add html5 audio to your webpage when you create links to audio files? The audio-tag-injector will do it for you.
The audio-tag-injector automatically adds html5 audio elements inline beside links to mp3, ogg, and wav files.
Where do I get it?
You can download it from github at https://github.com/matthewkastor/audio-tag-injector or, if you have node installed you can get it from npm
npm install audio-tag-injector
Usage
Using this module in your browser is as simple as including it in your page and calling audioTagInjector() after the page has loaded. See example.html in the root directory of this package.
The HTML5 audio tags will be added inline where this script finds a link whose href attribute ends in mp3, wav, or ogg. A basic error handler is added to the audio element to inform the user if the audio file couldn't load. The audio element also displays an error message if it is not supported in the users browser.
If you're using this module outside of a browser you will have to supply a reference to a dom document object, unless you've called it document and declared it globally. I did not require any specific module for parsing the DOM, because there are a few out there and it would be rude of me to force you to use a specific one for such a simple function.
Injection of Audio Tags in Browser
Simply include audio-tag-injector.js in your webpage, any links to audio files will automatically have html5 audio tags inserted beside them.
<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/audio-tag-injector/src/audio-tag-injector.js"
type="text/javascript">
</script>
<title>
Example Usage of audio-tag-injector.js
</title>
</head>
<body>
<h1>
Example Usage of audio-tag-injector.js
</h1>
<p>
Ooh! I made some audio! Check it out <a href="/some_audio_file.mp3">Kastor at the mic!</a>
</p>
<script type="text/javascript">
audioTagInjector();
</script>
</body>
</html>
Injection of Audio Tags in Node
// parse your html into a DOM Document using jsdom
// or something https://npmjs.org/package/jsdom
var fs = require('fs');
var jsdom = require("jsdom").jsdom;
var audioTagInjector = require('audio-tag-injector');
var html = fs.readFileSync('example.html', 'utf8');
// javascript written for the browser expects global
// window and document objects
var document = global.document = jsdom(html, null, {
features: {
FetchExternalResources : false,
ProcessExternalResources : false
}
});
var window = global.window = global.document.parentWindow;
audioTagInjector();
// alternatively, if you've called the
// document object something other than
// document, you may supply it as the
// first argument and everything will
// work out fine.
// audioTagInjector(nonstandardDocumentReference);
console.log(document.documentElement.innerHTML);
// Shazam. The document now contains audio
// tags you didn't have to write.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.