Question

我开发了一个功能多轨音频播放器，如果我连接到wifi，这个播放器按预期工作。我需要同时播放这些文件。但是，如果我在手机上，它会播放第一个文件，然后是第二个文件，然后是第三个文件，依此类推。有没有办法我可以先将所有选定的文件发送到服务器，然后将其发送回用户一起收听？请帮忙。需要尽快推出这个网站。

  makeSong = function(f) {
var add, button, path, play;
path = curpath.concat(["" + f + ".mp3"]).join('/');
button = function(cls, onclick) {
  return $('<i/>').addClass(cls).addClass('link').addClass('fa').addClass("fa-" +    cls).click(onclick);
};
play = button('play', function() {
  play = $(this).hasClass('fa-play');
  if (play) {
    multiPlayer.stop();
    singlePlayer.play1(path);
  } else {
    singlePlayer.stop();
  }
  $(this).toggleClass('fa-play', !play);
  return $(this).toggleClass('fa-pause', play);
});
add = button('plus', function() {
  return addItem(f, path);
});
return $('<div/>').addClass('sound     cf').text(f).append($('<div/>').addClass('buttons     left').append(play).append(add));
};

addSongs = function(fnames) {
var $songs, f, _i, _len, _results;
$songs = $('.sounds').empty();
_results = [];
for (_i = 0, _len = fnames.length; _i < _len; _i++) {
  f = fnames[_i];
  _results.push(makeSong(f).appendTo($songs));
}
return _results;
};

currentPath = [];

loadSongs = function(path) {
return $.getJSON('/api/dir', {
  parts: JSON.stringify(path)
}, function(d) {
  curpath = path;
  return addSongs(d.fnames);
});
};

parentFolder = function(x) {
return x.parents('.folder').first();
};

getPath = function(elem) {
var parent;
parent = parentFolder(elem);
if (parent.length === 0) {
  return [];
}
return getPath(parent).concat([parent.attr('data-folder')]);
};

$('.categories .folder span.link').click(function() {
loadSongs(getPath($(this)));
$('.categories .folder').removeClass('active');
return parentFolder($(this)).addClass('active');
});

$('.player .play').click(function() {
var $i, play;
$i = $(this).find('i');
play = $i.hasClass('fa-play');
if (play) {
  multiPlayer.playAll();
} else {
  multiPlayer.stop();
}
$i.toggleClass('fa-play', !play);
return $i.toggleClass('fa-pause', play);
});

$('.player .sound').click(function() {
var $i, mute;
$i = $(this).find('i');
mute = $i.hasClass('fa-volume-up');
if (mute) {
  multiPlayer.mute();
} else {
  multiPlayer.unmute();
}
$i.toggleClass('fa-volume-up', !mute);
return $i.toggleClass('fa-volume-off', mute);
});

$('.button.buy').click(function() {
var x;
x = [];
$('.things .thing').each(function() {
  return x.push($(this).attr('data-path'));
});
if (x.length > 0) {
  return window.location.href = "/buy?" + ($.param({
    songs: JSON.stringify(x)
  }));
} else {
  return alert('Please add some songs below first.');
}
});

$('.folder .link').click(function() {
return $(this).closest('.folder').children('.subfolders').toggle();
});

}).call(this);

Answer 1

这是一个收集和同步四个轨道的简单示例。对于完整的应用，您可能希望在 allLoaded（）中启用按钮或其他内容，而不仅仅是 play（）＆n 39 。

var tracks=[ // array of urls of mp3s
    "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d1t05.mp3",
    "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d2t02.mp3",
    "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d2t03.mp3",
    "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d1t10.mp3"
],

loadedCount=0, //how many tags are ready to play through?

tags=[]; // collection of <audio> tags


function allLoaded(){ //all tags can play, do something about it:
    tags.forEach(Function.call.bind(tags[0].play));
}

tracks.forEach(function(a){
    var aud=new Audio();
    tags.push(aud);    // add this track to collection
    aud.preload=true;  // important
    aud.controls=true; // only so we can see the player's time display to verify it works
    aud.oncanplaythrough=function(e){
        loadedCount++; //one more tags came in
        if(loadedCount===tracks.length) allLoaded(); //done loading
    };
    document.body.appendChild(aud); // needed to see time
    aud.src=a;  // load the mp3 url
    console.log("loading audio tag: ", aud);
});

强制性小提琴演示：https://jsfiddle.net/138vd2oc/

在支付方面，我并不关心金钱，所以请将任何额外的钱捐给一个有价值的事业，或者至少给我一个20美元的随机乞丐。

加载多个音频文件即使连接不良也要同时播放

1 个答案: