Adding Audio Issues

  • Thanks again for the response @WeddingDJ .

    I have a working project using A-Frame version 0.5.0 (probably doesn't make much difference in terms of this issue though), and the working line of code is simply this (whilst having the file available in the root of course):


    ...which I changed to the above, but have no idea if its correct.

    It must not be correct though as I only see the 360° image saved,


    Not the audio file, unless I'm missing something.

    So yeah, at a bit of a loss at the moment.

  • @jaysonvdw the audio file which you uploaded must be in public/assets/user/audio and the path in your code (a-sound) should show the right path.

    The reason why it is not playing is A-Frame related. You could exchange the A-Frame version 0.5.0 in your working example with 0.7.1 and see if it still works. If it does, then the only issue is your path to the audio file (assuming uploading photosphere images work and are shown correctly).

  • @WeddingDJ , thanks for the response.

    If I sort out the path and the file plays, that will be great, but then the path will allow only that one single sound file to play.

    Sorry to drag this on, but the goal is to allow users to add and position other sound files in a scene, as many as they like, in the same way that text annotations are added, and then have the sound file play on click.

    I'm not sure what additional content types to add to the config file to make this happen, and then what to add to the <a-sound> primitive to add this functionality.

    Hope that makes sense.

  • @jaysonvdw Interesting, can you say more about your application? what is the use case for positioning audio files and play them on click?

    If you look at the config.php file from IdeaSpace 360 Photo Tour, you would add a new content type called 'audio-annotations'. Then you add an 'audio' field. This would ensure that your users could upload multiple audio files, each within one content type.

    The next thing would be that you look at the 'photo-spheres' content type in config.php. There you will find a field called 'hotspot-annotations', make a copy of the block and add it below. Call it 'hotspot-audio-annotations' for example.

    'hotspot-audio-annotations' => [
              '#label' => 'Audio Hotspots',
              '#description' => 'Attach hotspots with sound to your photo sphere.',
              '#help' => 'Attach hotspots with sound to your photo sphere.',
              '#type' => 'position',
              '#maxnumber' => 20,
              '#required' => false,
              '#content-type-reference' => 'audio-annotations',
              '#field-reference' => 'photo-sphere',

    After you made the changes to the config.php file, you have to uninstall and install the theme, so that the changes take effect.

    Now you can assign audio hotspots to your photo spheres.

    In order to output the assigned audio files, you have to look at the scene.php file and how the hotspot-annotations are looped through and positioned. You have to do the same for your audio-hotspot-annotations.

    Next would be to write a custom A-Frame component which handles the click behaviour for controllers and you include this component in your index.php file.

    And that's basically it!

  • Hi All,

    @WeddingDJ , in terms of a potential use case, say a user wanted to re-create something like this demo:

    The user could set up, for example, an audio file that plays upon opening the URL, saying, "Welcome to the virtual museum, feel free to look around..." or whatever.

    Then, next to each piece of art, the user could set up a hotspot that would play a file comprising of interesting information about the painting, sculpture, etc. and so on.

    Thanks very much for the clear explanation in terms of the config changes!

    Ah shucks, I was hoping that said custom component would be floating around somewhere, will try figure it out though.

    Thanks again 👍🏼

  • @jaysonvdw Your project sounds interesting, looking forward to experience it!

    Concerning the A-Frame component, it should not be too hard to write it, everything is in their docs. Add your component to each a-sound entity. Use laser-controls and listen to a click event in your component in order to play the audio file.

  • @WeddingDJ , cool, thanks for the advice.

    Is something like this on the right track:

    document.querySelector('#soundclick1').addEventListener('mouseenter', function () {
     var aud1 = document.querySelector('#sound1');;


  • @jaysonvdw Looks good

  • Hi All,

    @WeddingDJ , some progress here, I added this in config.php inside 'photo-spheres' => []:

    'hotspot-audio-annotations' => [
    '#label' => 'Audio Hotspots',
    '#description' => 'Attach hotspots with sound to your photo sphere.',
    '#help' => 'Attach hotspots with sound to your photo sphere.',
    '#type' => 'position',
    '#maxnumber' => 20,
    '#required' => false,
    '#content-type-reference' => 'audio-annotations',
    '#field-reference' => 'photo-sphere',

    and this inside "#content-type":

    'audio-annotations' => [
    '#label' => 'Audio File',
    '#description' => 'Manage your audio files',
    '#max-values' => 'infinite',
    '#fields' => [
     'audio-file' => [
         '#label' => 'Audio File',
         '#description' => 'Upload an audio file.',
         '#help' => 'These files should be uploaded as .mp3 or .wav only.',
         '#type' => 'audio',
         '#required' => true,
         '#file-extension' => ['mp3', 'mp4', 'wav'],

    Then added this in scene.php.blade:

    @if (isset($photosphere['hotspot-audio-annotations']))
    @foreach ($photosphere['hotspot-audio-annotations']['#positions'] as $audioAnnotation)
               rotation="{{ $audioAnnotation['#rotation']['#x'] }} {{ $audioAnnotation['#rotation']['#y'] }} {{ $audioAnnotation['#rotation']['#z'] }}"
               position="{{ $audioAnnotation['#position']['#x'] }} {{ $audioAnnotation['#position']['#y'] }} {{ $audioAnnotation['#position']['#z'] }}">
               <a-sound id="playSound" src="url({{ $audioAnnotation['#content']['audio-file']['#uri']['#value'] }})" autoplay></a-sound>

    and lastly this, also in scene.blade.php, just before @endsection:

    var isPlaying = false;
    document.querySelector('#photosphere').addEventListener('mouseenter', function () {
       var audio = document.querySelector('#playSound');
       if (audio !== null && isPlaying === false) {
           isPlaying = true;

    The audio file is definitely being added to the page, but it keeps timing out. I also don't see the actual annotation that a user would click in order to play the sound.

    Any suggestions would be appreciated.

    Thank you.

  • @jaysonvdw The a-sound is just in an a-entity which has no geometry and so no visual representation.

Log in to reply