This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Alex Bystrov
Posted Jun 30 - Read on Facebook

Module request. Sound Effects for our prototypes.

It's always nice to have some of important user interactions followed by sound effects, right?

This seems pretty easy to implement, but turns out that on mobile (Frameless/Safari) an implementation of multiple sound effects without delays could be a real clusterfuck.

There are several problems:
1. No support of loading several audio files at once. One-in one-out.
2. iOS won't download the audio unless the user initiates the action.
3. There's about a 0.5-1 second delay before iOS is able to play the audio — because the audio object (in iOS, not HTML5) is being created.

The most promising solution is using audio-sprites, where you store all of your sounds in one long .wav and then address different time/positions in it when needed.

Two nice articles about it:
https://remysharp.com/2010/12/23/audio-sprites
https://www.ibm.com/developerworks/library/wa-ioshtml5

Ninja shit: JS compatible audio sprite generator (node.js, ffmpeg) https://github.com/tonistiigi/audiosprite. The module could also use the hosted version of this generator and be able to read the generated jsons. So any silly designer as myself could just drag'n'drop his sound files and be good to go.

And a nice sound kit here:
https://ui8.net/product/ui-sound-kit

3 Comments

Hidde de Jong

These articles talk about the audio element, but the Web Audio API is more widely supported today than when those articles were written. The Web Audio API allows you to create multiple audio buffers and has very precise timing. (It also includes much more like gain nodes, FX, custom FX etc) It is perfect for these purposes.

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html

Alex Bystrov

nice! thank you!

Andrew Nalband

+1 on making this easier - It'd be beautiful if you could just say

crowdnoise = new AudioLayer
file: "audio/crowdnoise.mp3"

field.on Events.Click, ->
crowdnoise.play()

Read the entire post on Facebook