76

I'm frustrated with the FPS right now so I'm working on a ghost rider/avoidance style car evading game with HRTF with jumping over cars and stuff. Gonna be an easy game but hey, the webaudio API should make this sound pretty cool. smile
I think those really big projects aren't for me. I'd rather create a ton of small, fun games than one really big one that I have to constantly attend to. Especially since I'm running into issues counting walls between the player and a sound source to muffle them... For some reason...

--
Ghorthalon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.

Thumbs up

77

Recently came across [HumbleNet], a free cross-platform network library for browsers that may prove useful.

-BrushTone v1.3.0: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

Thumbs up

78

what engine/library are you using Ghorthalon?
I would prefer lots of little games that younger kids could play so I can introduce them to the keyboard and web browser through fun games.

Thumbs up

79

I don't really use much. I only use Sono because it makes webaudio a lot simpler to work with, but other than that only JQuery, even though that's almost unnecessary.
I'm getting further with the lane splitter clone thing, I'm going to open source it if anyone wants to take a look when I'm done. smile

--
Ghorthalon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.

Thumbs up

80

[wow], sono is way better than Howler and is exactly what I need. I was looking for something that combined tone.js and howler.js together. I need to be able to generate sounds and control their panning.
Do you know how to generate sounds like trumpet sounds with the controls sono gives? In my apps people really don't like the pure square and sign waves I use.

Also, for the sono/panner, how do you set the heading position of the listener? I see:
    panner.setListenerPosition(x, y, z);
    panner.setListenerOrientation(x, y, z);
but I didn't know your orientation could be set by x, y and z. I thought it was something like 90 degrees or 180 degrees.

Thumbs up

81

Sorry I keep necroing this topic. But this is still something I keep coming back to. Now I'm actually getting a reasonable distance with it. And I got to learn some mad webpack skills while I was at it.

@frastlin: My understanding is, from using things like Three.JS, that the orientation refers to what the listener's point of view is, i.e, where are they looking?

If you want them to look left, say, you'd probably do: setListenerOrientation(-1, 0, 0)

But then if they move, that might have to be tracked.

So what you might wind up with, is:

const playerX = 0, playerY = 0, playerZ = 0;

// as the player's perspective moves, track that in these variables and adjust the listenerPosition accordingly

// look left

sono.panner.setListenerOrientation(playerX - 1, playerY, playerZ)

This is all in theory, I'm working on a testbed to fully test this out. As well as a little engine for 3D sound that I hope to use.

Interesting that you said that about howler.js vs sono, what did you find the differences were?

Thumbs up

82

I've been actually using web audio daw:
https://github.com/rserota/wad

It is the whole web audio API in a very easy to use package. I don't remember sono, but howler only plays external sounds, you can't generate sounds. WAD allows you to generate very complex sounds and play external sounds at the same time. The hard part is building sounds to generate... You can also kind of ignore the Firefox not working, I only use it in Firefox and it works great.
I have not yet used the 3D panning yet, just the left and right panning. I don't see where to set the listener though.

Thumbs up

83 (edited by truecraig 2017-11-28 01:01:57)

Ah okay, what put you off sono, do you remember?

Looking at WebAudioDAW, it doesn't look like it has an orientation, only that you set the panning based on the orientation you're given. I hope I'm not doing it a disservice, but it looks like that's the case. So you'd move the sounds's location accordingly. I... think. Looks more complex than sono, but it seems like it has more features. Audiophiles would love this stuff.

I've practically grocked sono now, with the ONE vital exception of setting the orientation. I've got an example where I move the P.O.V around, another where I move a sound source around, and I'm now most of the way to building a quick and dirty endless runner game using sono and 3D audio. I must admit I do quite like sono.

I just haven't quite understood the moving the orientation. I've currently got a truck idling in front of my POV 10 units away. I do what I suspect should spin my orientation around... but it doesn't. It influences the sound in interesting ways... but it doesn't seem to move where the sound comes from, it still sounds like it's in front. I wonder if it's all still tied into Three.JS.

Wondering whether to share my code as jists... but I'd have to leave the sounds out. I'm currently low on sounds as I lost a whole bunch of mine due to hard drive failure and me being very silly and not backing up, so I'm... appropriating sounds elsewhere for now to play with this idea smile

Thumbs up

84

Sono doesn't allow for advanced control of oscillators which is needed if you don't want to have the user download a ton of sounds. The problem is that making a sound is not a walk in the park.
I'm going to open an issue on web audio daw to ask about setting the position of the listener. I do have a script that sets positioning quite well with just stereo, but I would rather use the 3D panning.

Thumbs up

85

Oh, so instead of playing sounds, you generate all your sounds using an ocelator? Is that worth it? I'd imagine it's quite limiting and you'd wind up with lots of bleepy and bloopy noises, but I never did that sort of side of audio editing, so I don't really understand it. Maybe I should leave ocelators well alone.

Yeah, I think that would make sense. It's probably a lot easier than you having to rotate your positions around the player always being based at 0x3 (x=0, y=0, z=0). Otherwise you're going to get really mathsy.

I understand the Sono 3D audio a... little better. I managed to get a truck sort of rotating around a stationary POV. Except... well... the right and left both ended up the same place. You need the Z of your orientation at -1 to get even that. I recently saw that sounds themselves can have an orientation too. I don't understand the purpose or the complexities here. I must be missing something. Any advice appreciated.

I'm finding with both of these libraries, that neither really has tons of traction. Proves that web audio is really a new thing Even the Three.JS docs and such like isn't massively well defined. Maybe that's a good thing for innovation in the space. But bad when you're just getting started

Thumbs up

86

Yes, with oscillators you just generate the sounds in the web browser on the spot. Here are some examples:
http://webaudio.prototyping.bbc.co.uk/gunfire/
gunshots

https://www.leshylabs.com/apps/sfMaker/
old Nintendo sounds

The theory is that you can generate any sound by adding together oscillators in different combinations. This is how screen reader synthesizers were created before we had companies like Ivona putting real voices into synths.
The problem is that making a single sound is incredibly difficult and there are little to no resources on how to generate sounds with oscillators. Practically speaking, unless you use raw oscillators a lot (like me), the promise of procedurally generated sound is still far off. But the ability for everyone to listen to a sound effect generated by their web browser makes this a field that will see some innovation very soon, just because generating sounds is so much faster than loading them.

Thumbs up

87

BTW, you access the listener object by accessing the audio context. In WAD it is Wad.context.listener. I haven't spent much time with it, so don't know too much about what all the params mean.

Thumbs up