Adding Background Music & Persistent Logo

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

GMetri Prod | audo_logo_demoGMetri

Experience with persistent logo and background music

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.