Automatic audio sprite generator for web/javascript?

Question

Audio sprites (several audio bites concatenated in one audio file) are getting common in javascript control of audio on the web. However, it takes quite a lot of "stupid" work to create and implement an audio sprite. Is there a tool or method by which you could do it automatically instead of "manually"?

E.g. given a folder with audio files, I want a tool that generates

An audio file with all the contents, preferably separated by a bit of silence.
The onset and offset timings (in milliseconds) of each soundbite in the audiofile. Preferably, it would output the javascript sprite code itself!

score 6 · Answer 1 · answered Aug 14 '13 at 15:49

6

Check out this excellent Node.js solution:

https://github.com/tonistiigi/audiosprite

Worked great for me!

answered Aug 14 '13 at 15:49

Ryan Barrington Cox

79
1
4

score 4 · Accepted Answer · edited May 23 '17 at 12:08

This python script is a no-brainer way to generate audio sprites and appropriate javascript code for the web.

Features

No special modules need to be installed.
Concatenate audio files to a sprite, padded with silence
Generate javascript sprite information (timing)

Requirements:

Only works on .wav as input and output. Convert to other file formats afterwards.
All audio files should have identical properties (samplerate, channels etc.)

Python code:

silenceDuration = 0.2  # Seconds of silence between merged files
outfile = "soundsSprite.wav"  # Output file. Will be saved in the path below.
folder = "C:/Users/Jonas/Dropbox/Documents/cnru/programmering/html5 nback/stimuli_mess/audioletters/"

# Prepare...
import wave, os, glob
os.chdir(folder)
currentTime = 0
sprite = {}

# Open output file
output = wave.open(outfile, 'wb')

# Loop through files in folder and append to outfile
for i, infile in enumerate(glob.glob('*.wav')):
    # Skip the outfile itself
    if infile == outfile: continue

    # Open file and get info
    w = wave.open(folder + infile, 'rb')
    soundDuration = w.getnframes() / float(w.getframerate())

    # First file: determine general parameters- Create silence.
    if i == 0:
        output.setparams(w.getparams())
        silenceData = [0] * int(w.getframerate() * 2 * silenceDuration)  # N 0's where N are the number of samples corresponding to the duration specified in "silenceDuration"
        silenceFrames = "".join(wave.struct.pack('h', item) for item in silenceData)

    # Output sound + silence to file
    output.writeframes(w.readframes(w.getnframes()))
    output.writeframes(silenceFrames)
    w.close()

    # Create sprite metadata {'mysound.wav': [start_secs, end_secs]}. Then increment current time
    start = round(currentTime, 3)
    end = round(currentTime + soundDuration, 3)
    sprite[infile[:-4]] = [start, end]
    currentTime += soundDuration + silenceDuration

# Yay, the worst is behind us. Close output file
output.close()

# Output in the required format. Here for jquery.mb.audio
for filename, times in sprite.items():
    print '%s: {id: "%s", start: %.3f, end: %.3f, loop: false}, ' % (filename, filename, times[0], times[1])

** Output** I ran this for a number of audiofiles I had (letters read aloud) and got the following output:

Sprites variable:

{'AA': [0.449, 0.776], 'E': [3.149, 3.419], 'A': [0.0, 0.249], 'C': [2.113, 2.395], 'B': [1.554, 1.913], 'AE': [0.976, 1.354], 'D': [2.595, 2.949], 'G': [4.132, 4.554], 'F': [3.619, 3.932], 'H': [4.754, 4.972], 'K': [5.957, 6.258], 'J': [5.172, 5.757], 'L': [6.458, 6.719], 'O': [6.919, 7.133], 'Q': [8.488, 8.957], 'P': [7.853, 8.288], 'S': [9.681, 10.057], 'R': [9.157, 9.481], 'U': [10.694, 10.994], 'T': [10.257, 10.494], 'V': [11.194, 11.703], 'Y': [12.601, 12.93], 'X': [11.903, 12.401], 'Z': [13.13, 13.714], 'OE': [7.333, 7.653]}

... which was converted to jquery.mb.audio style:

AA: {id: "AA", start: 0.449, end: 0.776, loop: false}, 
E: {id: "E", start: 3.149, end: 3.419, loop: false}, 
A: {id: "A", start: 0.000, end: 0.249, loop: false}, 
C: {id: "C", start: 2.113, end: 2.395, loop: false}, 
B: {id: "B", start: 1.554, end: 1.913, loop: false}, 
AE: {id: "AE", start: 0.976, end: 1.354, loop: false}, 
D: {id: "D", start: 2.595, end: 2.949, loop: false}, 
G: {id: "G", start: 4.132, end: 4.554, loop: false}, 
F: {id: "F", start: 3.619, end: 3.932, loop: false}, 
H: {id: "H", start: 4.754, end: 4.972, loop: false}, 
K: {id: "K", start: 5.957, end: 6.258, loop: false}, 
J: {id: "J", start: 5.172, end: 5.757, loop: false}, 
L: {id: "L", start: 6.458, end: 6.719, loop: false}, 
O: {id: "O", start: 6.919, end: 7.133, loop: false}, 
Q: {id: "Q", start: 8.488, end: 8.957, loop: false}, 
P: {id: "P", start: 7.853, end: 8.288, loop: false}, 
S: {id: "S", start: 9.681, end: 10.057, loop: false}, 
R: {id: "R", start: 9.157, end: 9.481, loop: false}, 
U: {id: "U", start: 10.694, end: 10.994, loop: false}, 
T: {id: "T", start: 10.257, end: 10.494, loop: false}, 
V: {id: "V", start: 11.194, end: 11.703, loop: false}, 
Y: {id: "Y", start: 12.601, end: 12.930, loop: false}, 
X: {id: "X", start: 11.903, end: 12.401, loop: false}, 
Z: {id: "Z", start: 13.130, end: 13.714, loop: false}, 
OE: {id: "OE", start: 7.333, end: 7.653, loop: false},

Thanks to inspiration from: how to make a wav file with python and how to join wavefiles using python (tom10's answer)

Automatic audio sprite generator for web/javascript?

2 Answers2

Linked