Merge multiple audio buffer in to one by given position in real time - Web Audio Context
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am trying to mix multiple audios using jquery UI drag and drop. Means I will add tracks on the audio context dynamically which is dropped on a container. I am able to get track buffer after drop using XMLHttpRequest.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var buffers = ;
window.AudioContext = (window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext);
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
var audioContext = new AudioContext();
$( function() {
$( "#sortable1" ).droppable({
helper: "clone",
revert: "invalid",
accept: ".ui-state-highlight",
drop: function(e, ui){
console.log(ui.draggable.data('url'));
}
}).disableSelection();
$( "#sortable2").sortable({
revert: true,
connectWith: ".connectedSortable"
}).disableSelection();
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if(req.status == 200)
audioContext.decodeAudioData(req.response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9)
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
// I have buffers array, how I can merge the dropped tracks by dynamic positions using start and end
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Song 1</li>
</ul>
</body>
</html>What I can do now to merge dropped tracks and play in real time? I am very new on javascript audio context.
javascript jquery jquery-ui audiocontext webkitaudiocontext
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
add a comment |
0
I am trying to mix multiple audios using jquery UI drag and drop. Means I will add tracks on the audio context dynamically which is dropped on a container. I am able to get track buffer after drop using XMLHttpRequest.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var buffers = ;
window.AudioContext = (window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext);
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
var audioContext = new AudioContext();
$( function() {
$( "#sortable1" ).droppable({
helper: "clone",
revert: "invalid",
accept: ".ui-state-highlight",
drop: function(e, ui){
console.log(ui.draggable.data('url'));
}
}).disableSelection();
$( "#sortable2").sortable({
revert: true,
connectWith: ".connectedSortable"
}).disableSelection();
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if(req.status == 200)
audioContext.decodeAudioData(req.response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9)
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
// I have buffers array, how I can merge the dropped tracks by dynamic positions using start and end
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Song 1</li>
</ul>
</body>
</html>What I can do now to merge dropped tracks and play in real time? I am very new on javascript audio context.
javascript jquery jquery-ui audiocontext webkitaudiocontext
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
add a comment |
0
0
0
I am trying to mix multiple audios using jquery UI drag and drop. Means I will add tracks on the audio context dynamically which is dropped on a container. I am able to get track buffer after drop using XMLHttpRequest.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var buffers = ;
window.AudioContext = (window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext);
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
var audioContext = new AudioContext();
$( function() {
$( "#sortable1" ).droppable({
helper: "clone",
revert: "invalid",
accept: ".ui-state-highlight",
drop: function(e, ui){
console.log(ui.draggable.data('url'));
}
}).disableSelection();
$( "#sortable2").sortable({
revert: true,
connectWith: ".connectedSortable"
}).disableSelection();
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if(req.status == 200)
audioContext.decodeAudioData(req.response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9)
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
// I have buffers array, how I can merge the dropped tracks by dynamic positions using start and end
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Song 1</li>
</ul>
</body>
</html>What I can do now to merge dropped tracks and play in real time? I am very new on javascript audio context.
javascript jquery jquery-ui audiocontext webkitaudiocontext
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
I am trying to mix multiple audios using jquery UI drag and drop. Means I will add tracks on the audio context dynamically which is dropped on a container. I am able to get track buffer after drop using XMLHttpRequest.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var buffers = ;
window.AudioContext = (window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext);
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
var audioContext = new AudioContext();
$( function() {
$( "#sortable1" ).droppable({
helper: "clone",
revert: "invalid",
accept: ".ui-state-highlight",
drop: function(e, ui){
console.log(ui.draggable.data('url'));
}
}).disableSelection();
$( "#sortable2").sortable({
revert: true,
connectWith: ".connectedSortable"
}).disableSelection();
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if(req.status == 200)
audioContext.decodeAudioData(req.response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9)
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
// I have buffers array, how I can merge the dropped tracks by dynamic positions using start and end
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Song 1</li>
</ul>
</body>
</html>What I can do now to merge dropped tracks and play in real time? I am very new on javascript audio context.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var buffers = ;
window.AudioContext = (window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext);
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
var audioContext = new AudioContext();
$( function() {
$( "#sortable1" ).droppable({
helper: "clone",
revert: "invalid",
accept: ".ui-state-highlight",
drop: function(e, ui){
console.log(ui.draggable.data('url'));
}
}).disableSelection();
$( "#sortable2").sortable({
revert: true,
connectWith: ".connectedSortable"
}).disableSelection();
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if(req.status == 200)
audioContext.decodeAudioData(req.response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9)
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
// I have buffers array, how I can merge the dropped tracks by dynamic positions using start and end
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Song 1</li>
</ul>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var buffers = ;
window.AudioContext = (window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext);
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
var audioContext = new AudioContext();
$( function() {
$( "#sortable1" ).droppable({
helper: "clone",
revert: "invalid",
accept: ".ui-state-highlight",
drop: function(e, ui){
console.log(ui.draggable.data('url'));
}
}).disableSelection();
$( "#sortable2").sortable({
revert: true,
connectWith: ".connectedSortable"
}).disableSelection();
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if(req.status == 200)
audioContext.decodeAudioData(req.response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9)
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
// I have buffers array, how I can merge the dropped tracks by dynamic positions using start and end
} );
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Song 1</li>
<li class="ui-state-highlight" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Song 1</li>
</ul>
</body>
</html>javascript jquery jquery-ui audiocontext webkitaudiocontext
javascript jquery jquery-ui audiocontext webkitaudiocontext
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
edited Nov 29 '18 at 5:44
Tareq Aziz
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
asked Nov 29 '18 at 5:30
Tareq AzizTareq Aziz
77313
77313
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
I would advise a UI more similar to this example:
https://jqueryui.com/droppable/#photo-manager
Yours may end up being more complex, yet this is a good example of how you can use DnD features in a web app. Consider that users will need to perform certain tasks:
- Move selections into a specific location
- Adjust position of selections in that location
- remove selections from location
Additionally, do you want them to slice an audio snippet? Make it smaller? Adjust other settings about the audio file?
Consider the following code.
var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>Hope that helps.
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53532438%2fmerge-multiple-audio-buffer-in-to-one-by-given-position-in-real-time-web-audio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I would advise a UI more similar to this example:
https://jqueryui.com/droppable/#photo-manager
Yours may end up being more complex, yet this is a good example of how you can use DnD features in a web app. Consider that users will need to perform certain tasks:
- Move selections into a specific location
- Adjust position of selections in that location
- remove selections from location
Additionally, do you want them to slice an audio snippet? Make it smaller? Adjust other settings about the audio file?
Consider the following code.
var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>Hope that helps.
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
add a comment |
0
I would advise a UI more similar to this example:
https://jqueryui.com/droppable/#photo-manager
Yours may end up being more complex, yet this is a good example of how you can use DnD features in a web app. Consider that users will need to perform certain tasks:
- Move selections into a specific location
- Adjust position of selections in that location
- remove selections from location
Additionally, do you want them to slice an audio snippet? Make it smaller? Adjust other settings about the audio file?
Consider the following code.
var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>Hope that helps.
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
add a comment |
0
0
0
I would advise a UI more similar to this example:
https://jqueryui.com/droppable/#photo-manager
Yours may end up being more complex, yet this is a good example of how you can use DnD features in a web app. Consider that users will need to perform certain tasks:
- Move selections into a specific location
- Adjust position of selections in that location
- remove selections from location
Additionally, do you want them to slice an audio snippet? Make it smaller? Adjust other settings about the audio file?
Consider the following code.
var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>Hope that helps.
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
I would advise a UI more similar to this example:
https://jqueryui.com/droppable/#photo-manager
Yours may end up being more complex, yet this is a good example of how you can use DnD features in a web app. Consider that users will need to perform certain tasks:
- Move selections into a specific location
- Adjust position of selections in that location
- remove selections from location
Additionally, do you want them to slice an audio snippet? Make it smaller? Adjust other settings about the audio file?
Consider the following code.
var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>Hope that helps.
var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>var buffers = ;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;
if (!AudioContext) {
alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox.');
}
var audioCtx = new AudioContext();
$(function() {
$("#output").sortable({
revert: true,
accept: ".clip",
handle: ".handle",
placeholder: "ui-state-highlight",
receive: function(e, ui) {
var clip = ui.item;
console.log(clip.data("url"));
},
update: function(e, ui) {
if (ui.item.find(".ui-icon-close").length < 1) {
ui.item.append("<span class='ui-icon ui-icon-grip-dotted-vertical handle left'></span>");
ui.item.append("<span class='ui-icon ui-icon-close right'></span>");
$("#output .ui-icon-close").click(function(e) {
$(e.target).parent().remove();
});
}
}
}).disableSelection();
$("#song-clips li").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: "#output"
});
/*
function loadMusic(url, ac) {
var req = $.ajax({
cache: false,
url: url,
responseType: "arraybuffer",
processData: false,
success: function(response) {
ac.decodeAudioData(response,
function(buffer) {
var id = '_' + Math.random().toString(10).substr(2, 9);
buffers[id] = {
buffer: buffer,
start: 1,
to: 5
};
}, onDecodeError);
},
error: function(xhr, error) {
alert('Error during the load. ' + error);
}
});
}
*/
});body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
.connectedSortable {
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.song-wrapper {
width: 200px;
margin-bottom: 3px;
}
.trash-wrapper {
width: 200px;
float: right;
}
#output {
width: 100%;
height: 48px;
border: 1px solid #eee;
padding: 5px 3px;
overflow-x: scroll;
white-space: nowrap;
}
#output li {
min-height: 20px;
margin: 0;
padding: 5px;
float: left;
width: 120px;
}
#output .ui-icon-close:hover {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
}
#output .ui-icon-grip-dotted-vertical {
cursor: move;
}
#output .handle {
margin-top: 3px;
}
.left {
float: left;
}
.right {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="ui-widget song-wrapper">
<div class="ui-widget-header">Audio Clips</div>
<div class="ui-widget-content">
<ul id="song-clips" class="connectedSortable">
<li class="ui-state-default clip" data-url="https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3">Clip 1</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449593_7037-lq.mp3">Clip 2</li>
<li class="ui-state-default clip" data-url="https://freesound.org/data/previews/449/449554_2454046-lq.mp3">Clip 3</li>
</ul>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">Final Output</div>
<div class="ui-widget-content">
<ul id="output" class="connectedSortable">
</ul>
</div>
</div>answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
answered Nov 29 '18 at 23:57
TwistyTwisty
14.5k11635
14.5k11635
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
add a comment |
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
Thanks for your ans bro. That helpful. But what about the merge dropped tracks and play in real time?
– Tareq Aziz
Dec 1 '18 at 5:52
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
@TareqAziz glad that helps. If it helps, upvote and mark it as the answer. How do you want it to play the tracks? Button click? Work on it and post another question if needed.
– Twisty
Dec 1 '18 at 6:03
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
I want to play a track by the button click. the answer is only about drag and drop I already know that bro. need play in real time is the main question after dropping multiple tracks. Like looplabs (looplabs.com)
– Tareq Aziz
Dec 1 '18 at 6:12
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53532438%2fmerge-multiple-audio-buffer-in-to-one-by-given-position-in-real-time-web-audio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
