audio<\/code> tags, just get the DOM Node in Javascript and manipulate the volume<\/code> property.<\/p>\n\r\nvar audio = document.querySelector('audio');\r\n\/\/ Getting\r\nconsole.log(volume); \/\/ 1\r\n\/\/ Setting\r\naudio.volume = 0.5; \/\/ Reduce the Volume by Half\r\n<\/pre>\nThe number that you set should be in the range 0.0<\/code> to 1.0<\/code>, where 0.0<\/code> is the quietest and 1.0<\/code> is the loudest.<\/p>\nNote: If the value you set is not in the range 0.0<\/code> to 1.0<\/code>, then JS will throw an IndexSizeError<\/code>.<\/p>\nWeb Audio API<\/h2>\n
A bit of code first, where we’ll load our music file and play it using the Web Audio API.<\/p>\n
\r\nvar ctx = new webkitAudioContext();\r\n\r\nfunction loadMusic(url) {\r\n var req = new XMLHttpRequest();\r\n req.open('GET', url, true);\r\n req.responseType = 'arraybuffer';\r\n\r\n req.onload = function() {\r\n ctx.decodeAudioData(req.response, playSound);\r\n };\r\n\r\n req.send();\r\n}\r\n\r\nfunction playSound(buffer) {\r\n var src = ctx.createBufferSource();\r\n src.buffer = buffer;\r\n src.connect(ctx.destination);\r\n \/\/ Play now!\r\n src.noteOn(0);\r\n}\r\n<\/pre>\nSo, we load the audio file using XHR2<\/code> and then decode that to PCM Audio Data. In playSound<\/code> we create a Source, set its buffer to the AudioBuffer<\/code> object and connect it to the Destination (Speakers, Headphones, etc.). After the connection we finally play it. The entire flow is something like this:<\/p>\nSource<\/strong> -> Destination<\/strong><\/p>\nIf we want to control the volume of the audio, we need to connect the Source to a GainNode<\/code> which in turn will be conntected to the Destination. The flow will be like this then:<\/p>\nSource<\/strong> -> GainNode<\/strong> -> Destination<\/strong><\/p>\nThe code will be something like this:<\/p>\n
\r\nfunction playSound(buffer) {\r\n var src = ctx.createBufferSource();\r\n src.buffer = buffer;\r\n\r\n var gain_node = ctx.createGainNode();\r\n src.connect(gain_node);\r\n\r\n \/\/ ATTENTION! We're connecting the gain_node (NOT the source)\r\n \/\/ to the destination\r\n gain_node.connect(ctx.destination);\r\n\r\n \/\/ Changing the Volume\r\n gain_node.gain.value = 1;\r\n\r\n src.noteOn(0);\r\n}\r\n<\/pre>\nNice! The gain_node<\/code> object has a property called gain<\/code> which in turn has a property called value<\/code>. Now, Controlling the volume is just a matter of changing the value of gain_node.gain.value<\/code>. You can set a negative value (less than 0<\/code>) or more than 1<\/code> if you’d like to. Higher values will not throw exceptions unlike the other case that we covered with the <audio><\/code> element.<\/p>\n
![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/webaudio_gainnode_devtools_dump.png\" "\\"webaudio_gainnode_devtools_dump\\"")
<\/a><\/p>\n