如何使用 html5 和 jQuery 播放所有音频源

Posted 2023-02-25

【中文标题】如何使用 html5 和 jQuery 播放所有音频源

【英文标题】：How to play all audio sources with html5 and jQuery

【发布时间】：2015-01-17 21:16:08

【问题描述】：

我正在尝试仅使用 html5 和 jQuery 制作一个简单的音频播放器。 当我想播放一个文件/流，或者当我点击下一个/预览或播放列表中的另一个文件时，它工作得很好。

但我需要一个可以自动播放播放列表中所有文件的播放器。

我尝试了 $.each()，我尝试了一个递归函数……但没有成功……

我可以在这里展示一部分代码：

var el = $('#playerbox');
var soundType = el.data('page-soundtype');
var soundFile = el.data('page-soundfile');
var soundFiles = el.data('page-soundfiles');//playlist, paths to sources
var audio = $("<audio preload />");
//make 2 types of sources for different browsers:
var source1= $('<source />').attr('type', 'audio/mpeg');  // original, mp3 format
var source2= $('<source />').attr('type', 'audio/ogg'); // a copy, ogg format
audio.append(source1).append(source2);
el.append(audio);
var player=audio[0];
player.volume=0;
var i=0; //The play list counter, in case we have it
var op=; //player options

var runPlayer = function(op)
    var fadetime = (op.fadetime || 1000);
    player.oncanplay = function()
        player.play();
        audio.animate(volume: 1, fadetime);
    
    if(soundType === 'list')
        player.addEventListener('ended', function()
            i++;
            if(soundFiles[i].length>0)
                source1.attr('src', soundFiles[i]);
                source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));
                op.fadetime = 1500;
                player.pause();
                runPlayer(op);
            
        , false)
       

//set sources
if(soundType==='list' && $.isArray(soundFiles))
    //prepare playlist
    source1.attr('src', soundFiles[i]);
    source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));
    op.fadetime = 1;            

else if(soundType==='sound')
    //prepare sound
    source1.attr('src', soundFile);
    source2.attr('src', soundFile.replace(".mp3", ".ogg"));

runPlayer(op);

所以，第一个音频源播放良好，然后第二个加载到播放器的“src”，但没有播放:(

我的错误在哪里？ 谢谢。

【问题讨论】：

添加新源后，您是否调用过 source1.play() ？

我没有添加新的源，我只是更改了 元素现有源的 SRC 并尝试再次运行播放器。

好吧，这就是我的意思。所以一旦你更新了 src 属性，我认为你需要在音频元素上调用 .play()

【参考方案1】：

加载新的 src 后，您必须在该元素上调用 .play()

这是一个如何播放队列中所有音频文件的示例

var el = $('#playerbox'); //assuming here that el is your <audio> element
var audiosources = [song1.mp3, song2.mp3....]// here is your array of filenames
var index = 0;

function playNext(index)
  el.attr('src', audioSources[index]);
  el.play(); //this will play the element
  el.on('ended', function() //this will bind a function to the "ended" event
    //increment the index to target the next element
    index++;
    if(index < audioSources.length)
      //plays the next song and binds the function to the ended event again until the queue is empty
      playNext(index);          
    
  

playNext(index);

这对你有用吗？

【讨论】：

你的意思是：为播放列表中的每个元素创建一个标签？？？？我试图更改同一 标签的来源的 ths src。

刚刚编辑了我的答案。新版本应该更新 src 而不是播放下一个 元素，更适合您的问题。如果这不起作用或者您需要澄清，请告诉我

我想，我做了和你一样的事！但它不起作用。我会试试你的示例，但你为什么不使用 oncanplay？