How to Add Sound to Your Models with the Sketchfab Viewer API

Earlier this year, we disabled sound in our viewer while we began performing a legal review of the feature. At this time, we have no further information about when sound may be reactivated again.

We are aware that the absence of sound is a problem or frustration for some members, which is why we have prepared this guide to adding sound to embeds on your own site using the Sketchfab Viewer API. Access to the Viewer API is available on all plans, both paid and free.

Here are a few things you should keep in mind when trying these examples:

• Many browsers will not start playing sound until a user has interacted with the content, e.g., clicking on the 3D model. You may want to add a hint in your UI to make users aware of this.
• We provide our examples on JSFiddle.net. You can duplicate the example fiddles that we provided to customize them. JSFiddle is great for developing your project, but you should move the code to your own website to go into production.
• If you want to use an embed with sound on your website, you’ll need to create an HTML file with all the elements in it (HTML, CSS and Javascript) and put that file on your webserver. 
• You’ll need to host the audio files somewhere, too. If the audio files are hosted on the same domain as the HTML file, everything should run correctly. If you’re trying to use files from another domain (like a free audio website), you may run into CORS restrictions. If this happens, contact the owner of the other domain for further instructions.
• Using sound in a browser can be tricky: the browser handles all audio loading, which can result in numerous technical issues.

To get started:

• Click on the ‘Edit in JSFiddle’ link in the code examples.
• Replace the UID constant in line 2 with the UID of your model (the UID is the alphanumeric part of the model URL located after the final dash).
• Replace the src parameter of the element with a link to your audio file.
• Click ‘Run’ at the top of the window to see and hear the results.

Example 1: Autoplaying sound

This example starts playing a sound as soon as the model has loaded. The sound file is played once.

Note that some browsers will block autoplaying sound, and the user may need to click inside the embed once to activate it.

Select the ‘Result’ tab to run the code.

Example 2: Toggle sound by clicking on annotations.

This example will start playing a looping sound when the user clicks on an annotation. It will stop playing the sound when they click the annotation again. If they then click another annotation, another sound will play. Click on the orange background to stop the sound.

How to get help

If you need help getting your sound to work, our community can help in the following places:

• Our Development and API forum. This is a great place for longer conversations that require sharing code examples, etc. You can also easily browse through past questions.
• Our Community Discord. In the #api channel you can find people to talk to in real-time. Discord is great for less complex issues.