integrate audio into the app

virtualcommons / port-of-mars

Port of Mars is an online, game-based, social science experiment set on the first human community on the Red Planet. We are now in an open beta where anyone aged 18 and over can participate.

https://portofmars.asu.edu

GNU Affero General Public License v3.0

9 stars 15 forks source link

integrate audio into the app #647

Open alee opened 3 years ago

alee commented 3 years ago

clear sound / notification when the game starts
sound effects for different game actions (chat, investment, purchase, discard), events
overall game music
allow user to enable/disable sound fx / music?

chrstngyn commented 3 years ago

https://freesound.org/

chrstngyn commented 3 years ago

https://github.com/vueuse/sound

chrstngyn commented 3 years ago

I don't think we need to use @vueuse/sound. We can create an audio object instead https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio

Demonstrated in e9eb62cf8e403068f09cc37e87162536aed44a26

chrstngyn commented 3 years ago

fs node module (provides functionality to access and interact with file system) can be used on the server not the client. we may have to generate sound objects on the serverside instead

alee commented 3 years ago

JS audio libraries to look at:

https://howlerjs.com/

https://alemangui.github.io/pizzicato/

https://createjs.com/soundjs

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

cpritcha commented 2 years ago

We tried out howlerjs which works well.

We need to think about sound handling.

Some sounds are generated on the client only like if we have a click noises on the investment time block add and subtract buttons.
Other sounds are generated in response events like a change in phase, the beginning of a new game

Reacting to mutations in the Vuex store will result in playing sounds when we reload so I lean towards generating special events from the server that the client reacts to. So server emits fire and forget events and the client side has a data structure to decide how those events are played and synchronized.