audio-tag-injector

Automatically adds html5 audio elements inline beside links to mp3, ogg, and wav files.

#audio-tag-injector

Automatically adds html5 audio elements inline beside links to mp3, ogg, and wav files.

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

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.

<!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>
// 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.