0

我正在研究基于 A 框架的讲故事结构。

我将语音文件分成 3 个部分，目标是仅在满足正确条件时触发序列中的每个音频。

我试过 nar1.addEventListener('sound-ended',newCurrent) 没有运气。为了简化事情，我将省略条件：

<!DOCTYPE html>
<html class="a-html">
  <head>
    <meta charset="utf-8">
    <title>Panorama</title>
    <meta name="description" content="Panorama — A-Frame">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <button id="play-button" class="centerPos">Begin Your Experience</button>
    <a-scene vr-mode-ui="enabled: true" stats>
    <a-assets>
        <!-- SOUNDS -->
        <audio id="n1" src="snd/dt_narration_1.mp3" preload="auto">
        <audio id="n2" src="snd/dt_narration_2.mp3" preload="auto">
        <audio id="n3" src="snd/dt_narration_3.mp3" preload="auto">
    </a-assets>
    <!-- SOUNDS -->
        <a-sound id="nar1" src="#n1" autoplay="false" position="0 5 0"></a-sound>
        <a-sound id="nar2" src="#n2" autoplay="false" position="0 5 0"></a-sound>
        <a-sound id="nar3" src="#n3" autoplay="false" position="0 5 0"></a-sound>
    </a-scene>
  </body>
</html>
<script>
// sound assets
var nar_1 = document.getElementById('n1');
var nar_2 = document.getElementById('n2');
var nar_3 = document.getElementById('n3');

// a-sound entities
var nar1 = document.getElementById('nar1');
var nar2 = document.getElementById('nar2');
var nar3 = document.getElementById('nar3');

// listeners attached to entities
nar1.addEventListener("sound-ended", newCurrent);
nar2.addEventListener("sound-ended", newCurrent);
nar3.addEventListener("sound-ended", newCurrent);

// Play button, required by browsers to grab user interaction before autoplaying videos.
document.getElementById('play-button').addEventListener("click", function(e){
nar_1.play();  // launch the first voice over
this.style.display = 'none';
}, false);

function newCurrent(){
    // if conditions are met and its not the last audio, trigger next audio.
    console.log("story control enter.  You made it!");
}
</script>
4

1 回答 1

0

嗯，可能是因为你在使用<audio>元素，所以你必须在元素上监听事件<audio>？如果你传递一个内联 URL，我认为它会创建一个 BufferSource （这sound-ended是基于的），而媒体元素不会。不要sound-ended在实体上使用，请尝试：

document.querySelector("#n1").addEventListener('ended', newCurrent, false);

组件样式

您还可以将代码编写为在当前代码结束后播放声音的组件。

AFRAME.registerComponent('play-next-sound', {
  schema: {type: 'selector'},

  init: function () {
    var targetEl = this.data;  // Specified via schema.
    var soundEl = this.el;

    soundEl.addEventListener('sound-ended', function () {
      targetEl.components.sound.playSound();
    });
  }
});

然后：

<a-sound id="nar1" src="#n1" autoplay="false" position="0 5 0" play-next-sound="#nar2"></a-sound>
<a-sound id="nar2" src="#n2" autoplay="false" position="0 5 0" play-next-sound="#nar3"></a-sound>
<a-sound id="nar3" src="#n3" autoplay="false" position="0 5 0"></a-sound>

其他几种方法：

  • 让组件发出一个事件并使用该sound.on属性来触发它，而不是手动播放声音。
  • 与其将它们链接起来，不如让一个父实体包含所有它们，并让一个组件抓取所有子实体并按顺序播放。
于 2016-10-03T19:20:43.347 回答