2016-07-25 101 views
1

我有几个长篇故事,其源音频是逐句音频文件。我想创建一个网页,可以多次收听特定故事的单个句子,或从头至尾收听整个故事。如何按顺序播放多个音频文件

首先,我的网页上有很多<audio>元素,每个元素都在<p>的对应文本中。这些<audio>元素中的每一个对应于故事的单个句子。

我正要开始编码一个JavaScript对象,它将允许某种“全部播放”功能,您将点击按钮,它会播放音频[0],当完成时,音频[1 ]等等。它还会有一个“暂停”按钮并跟踪你的位置等等。这样,单个句子仍然可以播放或者欣赏,因为它们每个都有一个audio元素。或者,可以使用我顶部的“全部播放”按钮来处理audio元素的序列,就好像它们是一个大元素一样。

然后我开始问自己,这里是否有更好/更简单/更经典的解决方案。我想要做的一件事就是将所有这些单独的音频文件集中到一个大的音频文件中,并可能创建“章节”元素<track>。这是可取的吗?

每种方法有哪些优缺点?是否有一些开箱即用的解决方案已经为我做了,而这些解决方案我根本没有发现?

+0

你的问题是类似于此:http://stackoverflow.com/questions/18274061/html-5-audio-tag-multiple-files –

+0

相似,但不一样。该问题询问是否可以通过javascript控制多个音频元素。我认为这显然是可能的,我看到如何做(或多或少)。我的问题是这是否是一个好主意。或者,也许更重要的是,将音频文件集中在一起并创建某种章节系统是否更好。或者,是否有我在这里失踪的第三种解决方案。 – JawguyChooser

回答

-1

我使用JavaScript来解决问题,使用音频对象和setInterval。下面的例子:

var sndLetItSnow = new Audio("audio/letItSnow.m4a"); 
    var sndSanta = new Audio("audio/snow.m4a"); 

    var playlist = [sndLetItSnow, sndSanta]; 

    var current = null; 
    var idx = 0; 

    function playSound() { 
     if (current === null || current.ended) { 
      // go to next 
      current = playlist[idx++]; 

      // check if is the last of playlist and return to first 
      if (idx >= playlist.length) 
       idx = 0; 

      // return to begin 
      current.currentTime=0; 

      // play 
      current.play(); 
     } 

    } 

    setInterval(playSound, 1000); 

音频对象的更多文档,你可以访问此页面:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

我希望这帮助!