HTML5 Audio 播放本地 mp3 文件的播放列表

Posted 2023-02-25

【中文标题】HTML5 Audio 播放本地 mp3 文件的播放列表

【英文标题】：HTML5 Audio to play a playlist of local mp3 files

【发布时间】：2017-05-24 19:30:42

【问题描述】：

在搜索了一段时间如何制作音频标签以从本地机器播放歌曲后，我找到了这个解决方案（Play audio local file with html）：

var $audio = $('#myAudio');
$('input').on('change', function(e) 
  var target = e.currentTarget;
  var file = target.files[0];
  var reader = new FileReader();

  console.log($audio[0]);
   if (target.files && file) 
        var reader = new FileReader();
        reader.onload = function (e) 
            $audio.attr('src', e.target.result);
            $audio.play();
        
        reader.readAsDataURL(file);
    
);

还有html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file">
<audio controls id="myAudio" autoplay></audio>

上面的代码对于一个文件来说看起来不错。问题是有没有一种好方法可以从输入中加载多个文件以使音频像播放列表一样播放它们，而无需同时创建多个 FileReader 实例？类似于先将文件存储在数组中，然后从该数组中提供 src 或音频。

【问题讨论】：

输入元素可以允许选择多个文件。你为什么要这样做呢？如果文件保存在本地计算机上，用户可以使用他们喜欢的任何媒体播放器播放它们，并拥有完全控制权

这是一个在浏览器中创建播放器的有趣项目。我知道我可以从文件输入中选择多个文件，但是如何将这些文件添加到播放列表中？

我猜你会得到一个数组中选定文件的列表，并在完成最后一个时将音频控件的源更改为下一个？当这种情况发生时，有事件要告诉你developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

我认为你不能只使用文件的路径从本地机器加载音频。这就是我们需要 FileReader 的原因。

我没有说你不需要它。但是如果您有一个指定了“multiple”属性的输入，那么target.files 是一个可能包含>1 个条目的数组。记录您在数组中的位置，然后当上一个音频完成时，使用 Filereader 从数组中取出下一个项目并播放它（就像您现在使用单个文件一样）。对不起，我认为这会变得很明显

【参考方案1】：

createObjectURL 而不是new FileReader()

var songs = document.getElementById("songs"),
    myAudio = document.getElementById("myAudio");
function next(n)
  var url = URL.createObjectURL(files[n]);
  myAudio.setAttribute('src', url);
  myAudio.play();

var _next = 0,
    files,
    len;
songs.addEventListener('change', function() 
  files = songs.files;
  len = files.length;
  if(len)
    next(_next);
  
);
myAudio.addEventListener("ended", function()
   _next += 1;
   next(_next);
   console.log(len, _next);
   if((len-1)==_next)
     _next=-1;
   
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="songs" multiple>
<audio controls id="myAudio" autoplay></audio>

【讨论】：

哇，伙计！这比 FileReader 容易得多。仅供参考，我们还能用 FileReader 来做吗，因为每次我绑定目标结果时它都会给我：src(unknown) in audio tag？

@Lamar 也可以。但也许它给你未知，因为它不识别音频名称

谢谢，我将其标记为解决方案，因为它看起来比 FileReader 轻得多。