Getting Sound working with Sketchfab Viewer API

Support
,
#1

Hey all - Trying to get Audio working with the Viewer API. I’d like the audio to play once someone starts interacting with the viewer.

I’ve checked out the article here - Sketchfab Community Blog - » How to Add Sound to Your Models with the Sketchfab Viewer API - however when embedding on a site, it’s rendering the audio player as a separate element rather then part of the Viewer. (JS is not my strong suit, so it’s entirely possible I missed something basic here).

Can see my test here: test - Specterras Productions. I can also post code if that’s helpful.

Any help on this would be greatly appreciated!

#2

Hi,

I’m afraid browser once again strengthened their “user permission” due to Ads autoplaying.
Seems it now need the exact frame to be the target of the user interaction.

For example doing this fixes it


document.addEventListener("click", function(event) {

  // sound can be paused by user, browser, only way to know is to listen 
  // to the events

  audioSample1 = document.getElementById('audio1');
  audioSample1.addEventListener("playing", function(event) {
    audioPlaying1 = true;
  });
  audioSample1.addEventListener("pause", function(event) {
    audioPlaying1 = false;
  });

titleMessageElement= document.getElementById('title');

  skfbStart();
});
});
1 Like
#3

Hey - thanks, I’m still having the same issue with the audio player showing outside of the viewer. I’ve linked my code here - 2022-05-19 - any further suggestions would be very helpful here!

#4

Hiding it with CSS should do the trick ?

<audio controls="" id="audio1" loop="false" preload="" width="960" height="540" style="visibility: hidden">

#5

Hey Paul - This does hide the player (didn’t even think of just using CSS for that) - but the audio doesn’t work/play when interacting with the viewer.

#6

I’m still stuck on the same issue here, any further assistance would be appreciated.

#7

Hey - still having trouble with this @paul_sketch

#8

@support - can I get some help on this?

#9

I posted another thread on this but no one is responding so I thought I’d try reposting.

Trying to get Audio working with the Viewer API. I’d like the audio to play once someone starts interacting with the viewer.

I’ve checked out the article here - Sketchfab Community Blog - » How to Add Sound to Your Models with the Sketchfab Viewer API - however when embedding on a site, it’s rendering the audio player as a separate element rather then part of the Viewer. (JS is not my strong suit, so it’s entirely possible I missed something basic here).

Support suggested just hiding the player with CSS, however that doesn’t fix the issue because the audio is not working within the viewer…

Can see my test here: test - Specterras Productions. I can also post code if that’s helpful.

Any help on this would be greatly appreciated!

#10

I merged this post back into your original topic. Our team in France has some days off - we’ll try to get back to you next week. Alternatively, I can recommend visiting our community discord and posting this question (or a link to this topic forum) in the #api channel there - this might get you some help quicker.

#11

@carefreecreative does this codepen help: https://codepen.io/klaasnienhuis/pen/RwjYbBp ?
It plays sounds when you click annotations (click outside an annotation to stop the sound) and the audio elements are hidden.

1 Like