{"id":4177,"date":"2018-09-18T15:39:07","date_gmt":"2018-09-18T15:39:07","guid":{"rendered":"http:\/\/www.drmop.com\/?p=4177"},"modified":"2018-09-18T15:39:07","modified_gmt":"2018-09-18T15:39:07","slug":"simple-web-audio-wrapper","status":"publish","type":"post","link":"http:\/\/www.drmop.com\/index.php\/2018\/09\/18\/simple-web-audio-wrapper\/","title":{"rendered":"Simple Web Audio Wrapper"},"content":{"rendered":"

Seen this question asked numerous times, how to set up and use the Web Audio API, so I ripped some code out of my engine Booty5 and slimmed it down a bit and here it is, I have also pushed it to Github here<\/a>.<\/p>\n

[sourcecode language=”js”]
\n\/**
\n * A Sound represents a sound effect object and can be used to play back audio
\n *
\n * Generally a sound should be added to either a {@link b5.Scene} or the global {@link b5.App}’s resources so that it can be managed by them.
\n *
\n * Example showing how to load and play a sound effect
\n *
\n * var sound = new b5.Sound("explosion", "sounds\/explosion.mp3", true);
\n * var instance = sound.play();
\n *
\n * For a complete overview of Resources see {@link http:\/\/booty5.com\/html5-game-engine\/booty5-html5-game-engine-introduction\/resources-the-stuff-that-games-are-made-of\/ Booty5 Resources Overview}
\n *
\n * @class b5.Sound
\n * @constructor
\n * @returns {b5.Sound} The created sound
\n * @param name {string} Name of sound resource
\n * @param location {string} The sound file location
\n *
\n * @property {b5.App|b5.Scene} parent – Parent resource manager (internal)
\n * @property {object} snd – Sound instance (re-usable sound only) (internal). For Web Audio stores a {source:AudioBufferSourceNode, gain:GainNode} object for auto play sounds
\n * @property {object} buffer – AudioBufferSourceNode containing decoded audio data (Web Audio only)
\n * @property {string} name – Name of this sound resource
\n * @property {string} location – The location of the sound file that is used to create the audio object
\n * @property {boolean} loop – If set to true then sound will be looped
\n * @property {boolean} preload – If set to true then this sound will be preloaded
\n * @property {boolean} auto_play – If set to true then this sound will be preloaded
\n * @property {boolean} loaded – If true then this resource has finished loading
\n *\/<\/p>\n

var loadFile = function(filename, blocking, callback, binary)
\n{
\n var req = new XMLHttpRequest();
\n req.open("GET", filename, !blocking);
\n req.overrideMimeType("application\/json");
\n if (binary)
\n req.responseType = "arraybuffer";
\n if (!blocking)
\n {
\n req.onreadystatechange = function()
\n {
\n if (req.readyState === 4)
\n {
\n if (req.status === 200 || req.status === 0) \/\/ 0 for node-webkit
\n {
\n if (binary)
\n callback(req.response);
\n else
\n callback(req.responseText);
\n }
\n else
\n callback(null);
\n }
\n };
\n }
\n try
\n {
\n req.send();
\n }
\n catch(e)
\n {
\n return false;
\n }<\/p>\n

if (blocking)
\n {
\n if (req.status === 200)
\n {
\n if (binary)
\n callback(req.response);
\n else
\n callback(req.responseText);
\n }
\n else
\n callback(null);
\n }<\/p>\n

return true;
\n};<\/p>\n

b5.Sound = function(name, location)
\n{
\n \/\/ internal variables
\n this.parent = null; \/\/ Parent container
\n this.snd = null; \/\/ Sound instance (re-usable sound only). For Web Audio stores a {AudioBufferSourceNode, GainNode } object for auto play sounds
\n this.buffer = null; \/\/ AudioBufferSourceNode containing decoded audio data (Web Audio only)<\/p>\n

\/\/ Public variables
\n this.name = name;\t\t\t\t\t\/\/ The sound name
\n this.location = location;\t\t\t\/\/ Location of the sound
\n this.loop = false; \/\/ If set to true the this sound will replay continuously
\n this.preload = false; \/\/ Set to true to preload sound
\n this.loaded = false; \/\/ Set to true once audio cam be played
\n this.auto_play = false; \/\/ Set to true to auto play sound when loaded
\n this.load_retry = 0;
\n};<\/p>\n

\/**
\n * AudioContext used by Web Audio API
\n * @type {object}
\n *\/
\nb5.Sound.context = null;
\nb5.Sound.muted = false;<\/p>\n

\/**
\n * Initialises the sound system
\n * @parm app {b5.App} The App that will manage the audio engine
\n * @returns {boolean} true for success or false if error
\n *\/
\nb5.Sound.init = function(app)
\n{
\n if (app.use_web_audio)
\n {
\n try
\n {
\n window.AudioContext = window.AudioContext || window.webkitAudioContext;
\n if (window.AudioContext === undefined)
\n return false;
\n b5.Sound.context = new AudioContext();
\n }
\n catch(e)
\n {
\n return false;
\n }
\n return true;
\n }
\n return false;
\n};<\/p>\n

\/**
\n * Loads the sound
\n *\/
\nb5.Sound.prototype.load = function(force)
\n{
\n var debug = b5.app.debug;
\n \/\/var snd;
\n var that = this;
\n var filename = this.location;
\n var auto_play = this.auto_play;
\n if (!loadFile(filename, false, function(data) {
\n if (data !== null)
\n {
\n b5.Sound.context.decodeAudioData(data, function(buffer) {
\n that.buffer = buffer;
\n if (auto_play)
\n that.play(force);
\n }, function(e)
\n {
\n console.log(e)
\n });
\n }
\n else
\n {
\n that.load_retry++;
\n if (that.load_retry < 3)
\n that.load();
\n }
\n }, true))
\n {
\n that.load_retry++;
\n if (that.load_retry < 3)
\n that.load();
\n }
\n};<\/p>\n

\/**
\n * Starts playback of the sound
\n * @returns {object} An Audio object representing the playing sound or a {source, gain} object if using Web Audio API
\n *\/
\nb5.Sound.prototype.play = function(force)
\n{
\n if (force != true && b5.Sound.muted)
\n return null;
\n if (this.buffer === null)
\n return null;
\n var context = b5.Sound.context;
\n var source = context.createBufferSource();
\n var gain = context.createGain();
\n source.buffer = this.buffer;
\n source.loop = this.loop;
\n source.connect(gain);
\n gain.connect(context.destination);
\n gain.gain.value = 1;
\n source.start(0);
\n if (this.auto_play)
\n this.snd = { source: source, gain: gain };
\n return { source: source, gain: gain };
\n};<\/p>\n

\/**
\n * Stops playback of thr sound (re-usable sound only)
\n *\/
\nb5.Sound.prototype.stop = function()
\n{
\n var snd = this.snd;
\n if (snd === null || snd === undefined)
\n return;
\n snd = snd.source;
\n snd.stop();
\n};
\n[\/sourcecode]<\/p>\n

Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

Seen this question asked numerous times, how to set up and use the Web Audio API, so I ripped some code out of my engine Booty5 and slimmed it down a bit and here it is, I have also pushed it to Github here. [sourcecode language=”js”] \/** * A Sound represents a sound effect object […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[672,120,3,623],"tags":[606],"class_list":["post-4177","post","type-post","status-publish","format-standard","hentry","category-instant-games","category-javascript-programming","category-programming","category-web-development-2","tag-web-audio-api"],"_links":{"self":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/4177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/comments?post=4177"}],"version-history":[{"count":4,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/4177\/revisions"}],"predecessor-version":[{"id":4181,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/4177\/revisions\/4181"}],"wp:attachment":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/media?parent=4177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/categories?post=4177"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/tags?post=4177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}