How to move subsections of a song around in Javascript

Question

I want to be able to split a song loaded in an HTML5 audio in javascript into a number of sections of the song. Then I would like to be able to move those subsections around on the browser (meaning that song could be put out of order) and rejoin them to form the new song.

The problem is I don't know how to manipulate the song to get a bunch of subsections of the song and furthermore manipulate those subsections. To my knowledge the audio tag plays a single song at a time and that song can't be manipulated.

Is there a way to do this in javascript or in any audio framework right now?

I've looked into the Web Audio Api but it seems like it deals more with modifying inherit qualities of the song (pitch, sound, etc.)

`mySound = new Audio([URLString]); mySound.play();` You probably already looked at it, but here might be some relevant [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement). I couldn't seem to find *native* controls within the API, but you could use a library like [HowlerJS](https://github.com/goldfire/howler.js/). **Edit:** I believe sprites in HowlerJS are exactly what you are looking for. [Some more info here](http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library) — Jeff Noel, Aug 03 '15 at 18:46
Perhaps I wasn't entirely clear. I know how to generate an audio element and make it play. But what I would like to do is turn that song into a number of different "songs". Say I have a 60 second song. I would like to split that into 6 "10 second songs" and then change the play order so that the second 10 seconds song would play first and the first 10 second song would play second. And then rejoin that into the full song — MichaelGofron, Aug 03 '15 at 18:51

score 1 · Answer 1 · edited May 23 '17 at 12:22

If you want to use a library, HowlerJS could do it with sprites generated from your audio file.

var sound = new Howl({
  urls: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    blast: [0, 2000],   //Starts at 0 second, lasts 2 seconds.
    laser: [3000, 700], //Starts at 3 seconds within the audio file and lasts 0.7 second
    winner: [5000, 9000] //Starts at 5 seconds, lasts 9 seconds (ends at 14)
  }
});

// shoot the laser!
sound.play('laser');

In your case, you simply define multiple sprites and play them one after the other using this method.

Example taken from here.

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

If I understand it correctly, you're looking to play parts of a song in various order. Instead of splitting the file, can't you just manipulate the song's start times and end times? For instance, if you want to play from 1:25 to 1:50 when a user clicks on a certain element, then you can easily do that (Setting HTML5 audio position)

The user could "move parts of the song around" and you simply adjust the start/end times of the file: for instance, first play from 1:25 to 1:50, then play from 0:45 to 1:05, and so on.

Hope this helps.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 03 '15 at 18:59

frenchie

51,731
109
304
510

This is probably the best way that I could think of of doing it although I ended up simply splicing the audio file into small clips since I only had enough time for a simple mvp – MichaelGofron Aug 20 '15 at 23:10

score 1 · Answer 3 · answered Aug 03 '15 at 19:59

1

you can use SSSynthesiser.js for realtime manipulation of music. Rearrange parts of song, play instruments, change instruments and song properties, etc.

See examples of using here

answered Aug 03 '15 at 19:59

user1024

1,121
1
9
17

How to move subsections of a song around in Javascript

3 Answers3