Aframe audio issue

Question

I have included below audio asset in my scene. In two ways tried it....

<audio id="hover" src="resources/assets_data/hover.mp3"></audio>

and

<a-asset-item id="hover" src="resources/assets_data/hover.mp3" response-type="arraybuffer"></a-asset-item>

When I am trying to play this sound in four menu elements I am getting below error... and hover sound is playing only on first menu curved image....

components:sound:warn Sound not loaded yet. It will be played once it finished loading

Code:

<a-curvedimage  src="#a" transparent="true" 
                height="0.5" radius="0.9" theta-length="40" rotation="0 240 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
        </a-curvedimage>

        <a-curvedimage src="#b" transparent="true" 
                height="0.5" radius="0.9" theta-length="40" rotation="0 190 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
        </a-curvedimage>

        <a-curvedimage src="#c" transparent="true" 
                height="0.5" radius="0.9" theta-length="40" rotation="0  130 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
        </a-curvedimage>

        <a-curvedimage src="#d" transparent="true" 
                height="0.5" radius="0.9" theta-length="40" rotation="0  80 0" position="0 1.74 -1.4" sound="on: mouseenter; src: #hover" selectable>
        </a-curvedimage>

Answer 1

seems to be working when i used an audio tag with the preload: auto attribute:

<a-assets>
   <audio id="mysound" crossorigin="anonymous" src="...">
</a-assets>

Try it out here.