0

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>
4

1 に答える 1

0

うーん、<audio>要素を使用しているため、要素のイベントをリッスンする必要があり<audio>ますか? sound-endedインライン URL を渡すと、BufferSource (これに基づいている)が作成されると思いますが、メディア要素は作成されません。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 に答える