0

下記はAR.jsでマーカーにカメラをかざすと動画が流れるコードです。
そこで、ブラウザのSafariで動画を再生させる時に音声も流したいのですが、
下記のように画面や動画をタップすると音がでるようにコードを書いてみたのですが、音声が出ません。
どこがおかしいのでしょうか?

<!doctype html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
        <script>
            AFRAME.registerComponent('videohandler', {
                init: function () {
                    var marker = this.el;
                    this.vid = document.querySelector("#vid");

                    marker.addEventListener('markerFound', function () {
                        this.toggle = true;
                        this.vid.play();
                    }.bind(this));

                    marker.addEventListener('markerLost', function () {
                        this.toggle = false;
                        this.vid.pause();
                    }.bind(this));
                },
            });
            // タップを検出したら...
button.addEventListener('touchstart', () => {
audio.muted = true; // ミュート有効
audio.play(); // 動画再生
audio.pause(); // 動画停止
audio.muted = false; // ミュート無効
audio.currentTime = 0; // 開始秒数を戻す
});
            // マーカー認識されたら...
marker.addEventListener('markerFound', () => {
audio.play(); // 動画再生
});    </script>

    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            vr-mode-ui="enabled: false"
            loading-screen="enabled: false;"
            arjs='sourceType: webcam; debugUIEnabled: false;'
            id="scene"
            embedded
            gesture-detector
        >
            <a-assets>
                <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    autoplay
                    muted="true"
                    playsinline
                    controls="controls"
                    >
                    </video>
            </a-assets>
            <a-marker
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                videohandler
                smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
            <a-video
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
        
        
         </body>
</html>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。