LogoLogo
DocumentationWebsiteCommunityPortal
  • Get Started
    • Quickstart
    • Tutorials
    • Wizards
  • Features
    • Release Notes
      • 2024
        • 04-05 Apr Update
        • 03-27 Mar Update
        • 02-07 Feb Update
        • 01-23 Jan Update
        • 01-05 Jan Update
      • 2023
        • 12-18 Dec Update
        • 11-30 Nov Update
        • 10-30 Oct Update
        • 10-04 Oct Update
        • 09-18 Sep Update
        • 09-11 Sep Update
        • 08-28 Aug Update
        • 08-14 Aug Update
        • 07-23 July Update
        • 07-14 July Update
        • 06-16 June Update
        • 06-6 June Update
        • 05-16 May Update
        • 03-31 Mar Update
        • 03-16 Mar Update
        • 03-10 Mar Update
        • 02-07 Feb Update
        • 01-24 Jan Update
        • 01-10 Jan Update
      • 2022
        • 12-08 Dec Update
        • 11-13 Nov Update
        • 11-07 Nov Update
        • 10-26 Oct Update
        • 10-14 Oct Update
        • 10-01 Oct Update
        • 08-26 Aug Update
        • 08-02 Aug Update
        • 07-01 July Update
        • 06-08 June Update
        • 05-20 May Update
        • 05-05 May Update
        • 04-25 Apr Update
        • 02-11 Feb Update
        • 01-28 Jan Update
        • 01-10 Jan Update
      • 2021
        • 12-10 Dec Update
        • 12-01 Dec Update
        • 11-26 Nov Update
        • 11-17 Nov Update
        • 11-12 Nov Update
        • 11-09 Nov Update
        • 11-02 Nov Update
        • 10-26 Oct Update
        • 10-21 Oct Update
        • 10-14 Oct Update
        • 09-27 Sep Update
        • 08-31 Aug Update
        • 07-20 July Update
        • 07-02 July Update
        • 06-31 June Update
  • Metaverse
    • Building
      • Portal
        • Team Members
        • Defining Global Variables
      • Editor
        • File Manager
          • Selecting a file
          • Sketchfab Integration
        • Placement in 3D Space
        • Project Settings
          • Preferences
          • Branding
          • Collaborators
          • Menu
          • Variables in Settings
          • Lead Generation
          • Tour Mode
          • Advanced
          • E-Commerce in Settings
        • Preview
          • Headset Testing - WebXR Emulator
        • Viewport Properties
        • Editor Keyboard Shortcuts
      • Scenes
        • 3D Scene
          • Avatar System
          • Colliders
          • Zones
          • Lights
        • 360 Scene
        • Orbit Scene
      • Elements
        • Image
        • Video
        • Audio
        • GIF
        • Text to Speech
        • Character
        • Character AI
        • Actionbar
        • Timer
        • Polygon
        • Linked Popups
        • Variants
      • Rules
        • Shared Rules
        • How Rules Work
        • Number Variable Rules
        • String Variable Rules
        • Boolean Variable Rules
      • Variables
        • Autogenerated Variables
        • String Substitution
        • Capturing User Input
      • Build FAQs
    • Publishing
      • URL or QR Code
      • Embed on your Website
      • Full-Page HTML
      • Embedding within Apps
        • Android Embed
        • React Native Embed
      • Export as SCORM package
      • Authentication
        • SSO
        • Password With Expiry
        • Email with OTP
        • Custom List
        • Token
        • Load from another Experience
      • Publishing FAQs
      • Private Cloud Deployment
    • Multiplayer
      • Host Mode
      • Broadcast Mode
      • Voice Chat
      • Text Chat
      • Video Chat
      • Screenshare
      • Comments
      • Share Reactions
      • Notifications
      • Troubleshooting webcam and microphone
    • Analytics
      • Advanced Analytics
      • Leaderboard
      • Viewer Sessions
    • Integrations
      • GMetri with SCORM
        • Embed a SCORM package in a GMetri experience
      • Live Stream on GMetri
        • Live Stream Zoom on YouTube
        • Live Stream Zoom on Vimeo
          • Zoom Setup
      • E-Commerce with GMetri
        • Shopify Integration
        • WooCommerce Integration
        • Custom Integration
        • Using an E-Commerce Plugin
      • Adding a Chatbot
      • Sending data to GMetri Deployment
    • Viewing
      • Avatars
      • First/Third Person
      • Concurrency
      • Oculus Controls
      • Viewer Keyboard Shortcuts
      • IT Permissions
        • Whitelisting for Viewing Experiences
        • Whitelisting for Editing Experiences
        • Whitelisting for Analytics
        • Subprocessors
    • GMetri SDK
      • GMetri Player
      • GMetri SDK APIs
        • Project
        • Deployment
        • File
        • Viewer Group
      • GMetri Webhooks
      • API Token
      • Examples
  • Guidelines/Compatibility
    • Guidelines
      • Content Creation Guidelines
        • XR Experience Storyboard
        • 360 Degree Video Shoots
        • Avatars vs Characters
        • Designing 3D Models for Immersive VR mode
      • Asset Guidelines
        • 3D Models
          • Export GLB/GLTF from 3DS Max
          • Export GLB/GLTF from Blender
        • 360 Pano Images Render
        • Resources for Assets
        • Asset FAQs
        • Image Aspect Ratio
      • Experience Optimizations
        • Scene Optimizations
          • Performance Monitor
        • Image Optimizations
        • Audio Optimizations
        • Video Optimizations
        • 3D Model Optimizations
      • Workflows
        • Green Screen
          • Apply Green Screen to Videos
          • Accurate Color Selection
        • QR Code Scanner
        • Adding Sprites
        • Adding Background Music & Persistent Logo
        • EmbedHTML Snippets
    • Compatibility
      • Platform Requirements - Viewer
      • Platform Compatibility Matrix
      • Supported File Formats
      • Supported Browsers
      • Capture Network and Console Logs from Chrome Browser
    • Limitations
      • iOS Limitations
      • VR Mode Limitations
  • Platform
    • Billing
    • Platform FAQs
    • Security
    • Legal
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Guidelines/Compatibility
  2. Guidelines
  3. Workflows

Adding Background Music & Persistent Logo

PreviousAdding SpritesNextEmbedHTML Snippets

Last updated 2 years ago

Was this helpful?

Using the custom script feature of the GMetri platform, you can a background music and logo that is persistent across all scenes.

To add a logo or music to your experience which is persistant across all scenes:

  1. Head over to the "Advanced" section in Settings.

2. Add your custom script in the text area provided in this section.

To add a persistent background audio with mute/unmute controls, you can use the script below:

<script>

const bgm = document.createElement("audio");
const btn = document.createElement("button");

bgm.setAttribute("id", "bgm");
bgm.setAttribute(
  "src",
  "https://www.chosic.com/wp-content/uploads/2020/07/Art-Of-Silence_V2.mp3"
);

function play() {
  bgm.volume = 0.4;
  bgm.play();
  bgm.loop = true;
}

function muteUnmuteAudio() {
  if (bgm.muted == false) {
    bgm.muted = true;
    btn.setAttribute(
      "style",
      "background: url(https://s.vrgmetri.com/gb-web/teaxrweb/stw/mute_white.png); width: 64px; height: 64px; transform: scale(0.7); border: none;"
    );
    btn.style.position = "absolute";
    btn.style.bottom = "0";
    btn.style.right = "0";
  } else {
    bgm.muted = false;
    btn.setAttribute(
      "style",
      "background: url(https://s.vrgmetri.com/gb-web/teaxrweb/stw/unmute_white.png); width: 64px; height: 64px; transform: scale(0.7); border: none;"
    );
    btn.style.position = "absolute";
    btn.style.bottom = "0";
    btn.style.right = "0";
  }
}

function attachAudioControls() {
  btn.setAttribute(
    "style",
    "background: url(https://s.vrgmetri.com/gb-web/teaxrweb/stw/unmute_white.png); width: 64px; height: 64px; transform: scale(0.7); border: none;"
  );
  btn.style.position = "absolute";
  btn.style.bottom = "0";
  btn.style.right = "0";
  btn.onclick = muteUnmuteAudio;
  document.getElementById("user-script").appendChild(btn);
}

let checker = setInterval(play, 1000);
attachAudioControls();
</script>

As you can notice in the sample experience above, a background audio plays in the experience that keeps playing even when you change scenes! Also a speaker icon at the bottom right can be clicked to mute/unmute the audio.

3. To add a logo to your experience add the script below:

<script>
const logo =
  "https://avatars.githubusercontent.com/u/60691540?s=200&v=4";

function createHeader() {
  const header = document.createElement("span");
  header.style.position = "fixed";
  header.style.top = "16px";
  header.style.left = "16px";

  document.getElementById("user-script").appendChild(header);

  const img = document.createElement("img");
  img.style.width = "120px";
  img.style.height = "auto";
  img.src = logo;
  header.appendChild(img);
}

createHeader()
</script>

You can adjust the CSS in this script to place the logo at any location in the experience. As you can see, in the sample experience above GMetri logo was added to the top left using this custom script.

Experience with persistent logo and background music