3D Positional Audio (Webaudio api) in Hype

Hi Everyone!

I’d like to use 3D positional audio in a project that I’m working on. I found a demo of it working in the wild here (http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-3d), but I can’t seem to figure out how to get this to work within Hype.

Would anyone happen to have any suggestions of how I can use Hype elements to control positional audio? For example, if I have a man walking past a speaker, the user will hear where the speaker is in relation to the man.

Thanks everyone!!

Logan

Cool idea! With the hypeDocument.getElementProperty() api, you can get the X and Y coordinates of an element which you can use the with the technique above. (More info here)

So if your man has an ID, you would read that ID using the above API, and use the values extracted from that to control one of the values for the L or R pan for your audio element. You’ll need to program your audio element using standard JavaScript code, but the interface with the position of your Hype element is the only Hype-related work here. You can test what you have outside of Hype, and then place it within a regular Hype element to make use of your Hype element’s position.

This post is also helpful to see the full code required to access those Web Audio APIs: http://www.html5rocks.com/en/tutorials/webaudio/positional_audio/

2 Likes

I did this for @lriley3 as a private request a little after he posted this.

For anyone else that would like to see this in action look here

Example

3 Likes

Your example got me lightyears ahead of where I was!! I’m still fiddling with it to get it just right. I’ll post the final result project file once I’ve finished it. Thanks so much for the help everyone!!

Looking forward to viewing your (and @DBear 's) solution. I am encountering a similar situation just now. Thanks.

Hi to All!

I have just come across an easy to use audio tool, looks promising so far...

Wad is a Javascript library for manipulating audio using the new HTML5 Web Audio API. It greatly simplifies the process of creating, playing, and manipulating audio, either for real-time playback, or at scheduled intervals. Wad provides a simple interface to use many features one would find in a desktop DAW (digital audio workstation), but doesn't require the user to worry about sending XHR requests or setting up complex audio graphs.

The Wad library is approximately 53K in size. Web Audio DAW (digital audio workstation).


Demo: Basic Pan effect
Took about 10 minutes to code - including a quick skim of the instructions for the first time - it's that easy.
https://dl.dropboxusercontent.com/spa/lyxszk5uyjw9g12/Exports/wadTrial/wadTrial.html

Required: Chrome 45+; FireFox 45+; Safari 9+; Opera 36+; Edge 13+. (Web Audio API not supported in IE.)
iOS Safari 8.4+; Android browser~Chrome 50+.
Full listing of browser support here.

This demo is not hooked up to the slider's location at this point, it is timeline based.

Project: wadTrial.hype.zip (165.4 KB)


Here's the code - pretty straightforward - very little required to set-up the actual WebAudio itself:


    function wadPlay(hypeDocument, element, event) {
    var wadAudio = new Wad({source : '${resourcesFolderName}/DeepDreamsXX.mp4', env : { hold : 17000 } });
    	var panShift = -1.0;
    	var panShiftEnd = 1.0;
    	wadAudio.setPanning(panShift);
    	wadAudio.play();
    	hypeDocument.goToTimeInTimelineNamed(0, 'Main Timeline')
    	hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false)

    	var sequencer = setInterval(function() {panShift01()}, 390);
    	function panShift01() {
    		if (panShift > panShiftEnd) {
    			clearInterval(sequencer);
    		}
    		else {
    			  wadAudio.setPanning(panShift);;
    			  panShift = panShift + .1;
    			 }
    	}	
  }
2 Likes