CODEWITHSUNDEEP
javascriptgoogle-chromeweb-audio-apiaframe
genhernandez
genhernandez

Reputation: 472

Error: Unable to decode audio data when playing sound onclick within A-frame Environment

I have looked at other answers to similar questions, and unfortunately, I can't seem to figure out what I need to change in my code.

Here is the component I made to handle the sound: 

// https://glitch.com/edit/#!/smiling-armchair
AFRAME.registerComponent('soccer-audiohandler', {
        init:function() {
            let playing = false;
            var el = this.el;
            let audioEl = document.querySelector("a-sound");
            audioEl.setAttribute("src", "#soccer-game");

            audioEl.addEventListener("loaded", (e) => {
                console.log("AUDIO LOADED")
                console.log(e)
                var audio = audioEl.components.sound;
                el.addEventListener('click', (ee) => {
                    console.log(ee)
                    if(!playing){
                        audio.playSound();
                    } else {
                        audio.stopSound();
                    }
                    playing = !playing;
                });
            })
    }
})

Here is the scene where the component is rendered

<!DOCTYPE html>
<html>
  <head>
 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
 <script src="https://npmcdn.com/[email protected]"></script>
 <script src="https://npmcdn.com/[email protected]"></script>
 <script src="https://npmcdn.com/[email protected]"></script>
 <script src="https://npmcdn.com/[email protected]"></script>
  <script src="component/soccer-audiohandler.js"></script>
</head>
<body>
  <!-- Try changing the preset to one of default, contact, egypt, checkerboard, forest, goaland, yavapai, goldmine, 
     threetowers, poison, arches, tron, japan, dream, volcano, starry, osiris. -->
<!-- See more environment options: https://github.com/feiss/aframe-environment-component#parameters -->
<a-scene cursor="rayOrigin:mouse" environment ="preset:goaland" >
    <a-assets>
        <a-sound src="some/path/here" id="soccer-game"></a-sound>
    </a-assets>
      <!--https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md-->
    <!--https://github.com/aframevr/aframe/blob/master/docs/components/sound.md-->
    <a-text font="kelsonsans" value="click to play sound" width="8" position="0 2.25 -5" rotation="0 15 0"></a-text>
    <a-sound geometry="primitive:box; width: 1; height: 1; depth: 1;"
             position="1 1 -5"
             autoplay="false"
             soccer-audiohandler src='#soccer-game'></a-sound>
</a-scene>
</body>
</html>

I know the problem is not the path because the audio plays fine when I load it in a 360-degree image gallery, but it does not load in the scene above. I have tried using .wav files and .ogg files. I also tried shortening the audio since the original is rather long. Anyone have any suggestions on how I can remedy this?

Upvotes: 1

Views: 396

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

You should use <audio> instead of <a-sound> in the <a-assets>, as described here.

working fiddle here.

Upvotes: 3

Related Questions