A-frame into Playcanvas? (Speech Recognition)

Help & Support
1

Hi Forum. Help Please!
This project uses the annyang speech recognition: https://cdnjs.cloudflare.com/ajax/libs/annyang/2.5.0/annyang.min.js library and the speech component of A-frame.io. To change the color of a cylinder. but there are some errors still. the microphone is activated but it just does not work yet. Everything seems to be correct, this is some code

<!-- See https://www.npmjs.com/package/aframe-speech-command-component for more info -->
<html>
  <head>
    <scscriptript src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.5.0/annyang.min.js"></script>
  </head>
  
  <body>
<a-scene>  
  
  <a-entity id="annyang" annyang-speech-recognition></a-entity>

  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

   <a-box speech-command__cube = "command: move cube; type: attribute; attribute: position; value: -1 1.25 -2;" position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>

    <a-cylinder speech-command__color = "command: red; type: attribute; attribute: color; value: lightgreen;" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>

  <a-sky color="#ECECEC"></a-sky>
  <a-text posiion="1  1 -2" align="center" value="Say showshow/hide box" color="black"></a-text>

</a-scene>
  </body>
</html>
2

Given that all the code shown is A-frame, it be better to ask on their forums?

If you are looking for speech recognition in PlayCanvas, then you might be better off using just the WebAPI directly: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

3

Thanks for your reply. I’ve really tried the project on glitch.com and apparently there were no problems. I thought maybe I needed to add some extra code so that playcanvas could use the microphone correctly :slightly_smiling_face:

4

You don’t need A-Frame to use Annyang with PlayCanvas. Just add annyang.min.js to your PlayCanvas project and call its functions directly.