使用 createObjectURL 项数组来选择 HTML5 音频标签的 src答案

【问题标题】：Using an array of createObjectURL items to select the src for HTML5 audio tag使用 createObjectURL 项数组来选择 HTML5 音频标签的 src
【发布时间】：2016-07-11 05:09:57
【问题描述】：

我正在创建一个简单的 HTML5/javascript 页面来使用 HTML5 音频标签播放本地 MP3 文件，但我遇到了一个我无法弄清楚的问题。

我使用文件输入标签来获取文件列表，然后使用 URL.createObjectURL 将这些文件填充到数组中。然后我想将这些文件从数组中拉出来，并将它们输入到音频标签的 SRC 中以播放它们。

这对第一个文件很有用，但是每当我尝试触发事件以加载另一首歌曲时，第一首加载的歌曲就会播放。

我检查了数组，所有元素都包含不同的对象，所以看起来没问题，但是 src 似乎永远不会改变。

Javascript：

var Files = [];
    var FileNames = [];

    var LoadSong = function()
    {
      var selectedfolder = document.getElementById("folder_select"),
          files = selectedfolder.files,
          audioplayer = document.getElementById("audio_player"),
          audiosource = document.getElementById("mp3_src"),
          a = FileNames.indexOf(this.innerHTML);

      audiosource = Files[a];
      audioplayer.pause();
      audioplayer.load();
      audioplayer.oncanplaythrough = audioplayer.play();
      $("ul li").removeClass("playing");
      this.className = "playing";
    };

    var GetFiles = function()
    {
      if (window.File && window.FileReader && window.FileList && window.Blob)
      {
      }
      else
      {
        alert("This browser cannot support this upload method");
        return;
      }
      var selectedfolder = document.getElementById("folder_select"),
          files = selectedfolder.files,
          audioplayer = document.getElementById("audio_player"),
          audiosource = document.getElementById("mp3_src");
          songlist = document.getElementById("song_list");

      for (i = 0; i < files.length; i++) {
        Files.push(URL.createObjectURL(files[i]));
        FileNames.push(files[i].name);

        var li = document.createElement('li');
        li.className = 'songlistitem';
        li.innerHTML = files[i].name;
        songlist.appendChild(li);
        li.onclick = LoadSong;
      }

      audiosource.src = Files[6];

      audioplayer.pause();
      audioplayer.load();
      audioplayer.oncanplaythrough = audioplayer.play();
    };

    $(function () {
      $("#folder_select").change(GetFiles);
    });

HTML：

    <html>
    <head>
      <title>MusicPlayer</title>
      <link rel="stylesheet" href="css/styles.css" />

      <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
      <script src="js/main.js"></script> 
    </head>
    <body>
      <audio id="audio_player" controls>
        <source id="mp3_src" type="audio/mp3" />
      </audio>
      <input type="file" id="folder_select" webkitdirectory directory multiple />
      <ul id="song_list">
        <li class="top">These songs have been loaded:</li>
      </ul>
    </body>
</html>

看起来应该是一个愚蠢的简单项目，但我无法弄清楚为什么它不起作用。任何帮助都会很棒。谢谢！

【问题讨论】：

audioplayer.oncanplaythrough = function(){audioplayer.play();};

标签： javascript

【解决方案1】：

所以，事实证明这是一个简单的修复...是我将 .src 属性从音频源引用中删除。

下面是更新的 LoadSong 方法以显示修复。谢谢。

    var LoadSong = function() {
      var audioplayer = document.getElementById("audio_player"),
          audiosource = document.getElementById("mp3_src");

      audiosource.src = Files[TrackIndex];
      audioplayer.pause();
      audioplayer.load();
      audioplayer.play();
      $("ul li").removeClass("playing");
      $("li").eq(TrackIndex).addClass("playing");

      chrome.notifications.create('nowplaying', {
        type: 'basic',
        iconUrl: AlbumArt,
        title: FileNames[TrackIndex],
        message: FileNames[TrackIndex]
      }, function(notificationId){});
    };

【讨论】：

我不明白您将 .src 属性从音频源参考中删除是什么意思
在我的初始代码中：audiosource = Files[a];我需要改为：audiosource.src = Files[a];