Created
March 27, 2017 14:39
-
-
Save GeorgeWL/07dd580ad21b7ce371e9800416d57aa0 to your computer and use it in GitHub Desktop.
abstracted version of code seems to not work for web audio
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function audioLoader(fileDirectory) { | |
var soundObj = {}; | |
soundObj.fileDirectory = fileDirectory; //my guess is it's here the issue | |
var getSound = new XMLHttpRequest(); | |
getSound.open("GET", soundObj.fileDirectory, true); | |
// library object | |
getSound.responseType = "arraybuffer"; | |
// a buffer stores data temporarily in the browser, for low-latency, prevents having to wait for load to play sound | |
getSound.onload = function() { | |
audioContext.decodeAudioData(getSound.response, function(buffer) //takes the xhtmlrequest, which is stored in getSound, and creates the buffer | |
{ | |
soundObj.soundToPlay = buffer; | |
//calls the folder of sounds and stored in soundObj and puts into buffer of page | |
}); | |
} | |
getSound.send(); | |
soundObj.play = function() { | |
var playSound = audioContext.createBufferSource(); | |
playSound.buffer = soundObj.soundToPlay; //assign soundObj to playSound | |
var volume = audioContext.createGain(); | |
volume.gain.value = volumeVal; //control the gain in a variable | |
playSound.connect(volume); | |
volume.connect(audioContext.destination); //connect to output | |
playSound.start(audioContext.currentTime); | |
} | |
return soundObj; | |
}; | |
var pianoC3 = audioLoader("audio/pianoC3.mp3"); | |
function keyPressed(){ | |
pianoC3.play(1); | |
} | |
window.addEventListener("keydown", pianoC3.play, false); //adds keydown event to browser to activate the sound. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict" | |
// Code which checks browser compatibility, and if compatible but needs a different object name, changes object name | |
function audioContextBrowser() { | |
if (typeof AudioContext !== "undefined") { | |
return new AudioContext(); | |
} else if (typeof webkitAudioContext !== "undefined") { | |
return new webkitAudioContext(); | |
} else if (typeof mozAudioContext !== "undefined") { | |
return new mozAudioContext(); | |
} else { | |
throw new Error('AudioContext not Supported'); | |
throw new console.error('AudioContext not Supported'); | |
} | |
} | |
var audioContext = new audioContextBrowser(); | |
var audioBuffer; | |
var getSound = new XMLHttpRequest(); | |
getSound.open("get", "audio/pianoC3.mp3", true); | |
// open source creative commons Zero sound https://www.freesound.org/people/Tesabob2001/sounds/203479/ | |
getSound.responseType = "arraybuffer"; | |
// a buffer stores data temporarily in the browser, for low-latency, prevents having to wait for load to play sound | |
getSound.onload = function() { | |
audioContext.decodeAudioData(getSound.response, function(buffer) //takes the xhtmlrequest, which is stored in getSound, and creates the buffer | |
{ | |
audioBuffer = buffer; | |
//calls the buffer of sounds and stores in var audioBuffer | |
}); | |
}; | |
getSound.send(); | |
window.addEventListener("mousedown", playback); //adds click event to browser to activate the sound. | |
function playback() { //basically required to playback. | |
var playSound = audioContext.createBufferSource(); | |
playSound.buffer = audioBuffer; //assign audioBuffer to playSound | |
playSound.connect(audioContext.destination); //connect to output | |
playSound.start(audioContext.currentTime); | |
} | |
//next step is to abstract this code, so load and playback is done with 2 lines, rather than 25 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Soundtest</title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
<!-- abstracted code to check whether browser is compatible --> | |
<script src="js/audioCheck.js"></script> | |
<!-- audioLoader code --> | |
<script src="js/audioLib.js"></script> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> | |
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<!-- Oscillator-based audio generation, which will likely be used in final version. --> | |
<!-- <script src="js/simpleaudio.js"></script> --> | |
<!-- standard load of audio file, without abstracted code. | |
<script src="js/musictest.js"></script> --> | |
<div class="container"> | |
<img class="img-responsive" src="http://i.imgur.com/VPIHWEH.png" alt="gainmap.PNG" title="Source: Introduction to Web Audio API, Pluralsight Creative"> | |
<p> | |
e.g. of a gain mapping from PluralSight Creative | |
</p> | |
</div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment