Question

我正在研究基于A-frame的故事讲述结构。

我将音频文件分为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>

Answer 1

嗯，也许是因为你使用<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属性触发它，而不是手动播放声音。
不是将它们链接起来，而是让父实体包含所有子实体，并让一个组件抓住所有子节点并按顺序播放。

在<a-frame>实体上触发“声音结束”的最有效方法是什么？

1 个答案:

组件样式