Trouble with triggering sounds in Quest 5.9 (through html/javascript)...update

[vurt834]

Well, go back a handful of posts, and you'll see the problem. My game when I was writing it using Quest 5.8 and using sound effects to signify the success of certain actions, when the user say open a door, the screen would clear, play a gif in the middle of the screen, and trigger a sound. Well, moving to Quest 5.9, with its new Chrome build, the old autoplay html doesn't work anymore because of Chrome's new policies. So, I asked for help, and KV brought up the idea of triggering the sound with a popup. They gave me a bit of code to do it, so I integrated that with my existing popup code. This did indeed play a sound when you dismissed the popup, but I still wanted a way to play a sound when the popup came up, not when it was dismissed. So, I turned to ChatGPT-o3 to help (usually done when I'm out of ideas), and the code finally worked the way I wanted. Here is the function I put together. If you want to use it, you need to alter the code to fit the stylings of your game. The function is PopUpSound (image file, sound file). In the function "gif" is listed as the parameter, but I'd imagine it would work with jpg or png. It was originally created for opening a door, so some variable names mention that, but I changed it to be a universal function:

PlayGif = GetFileURL(gif) PlaySound = GetFileURL(sound) JS.eval ("var overlay = document.createElement('div'); overlay.id = 'doorPopupOverlay'; document.body.appendChild(overlay)") JS.eval ("document.getElementById('doorPopupOverlay').style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000'") JS.eval ("var popup = document.createElement('div'); popup.id = 'doorPopup'; document.getElementById('doorPopupOverlay').appendChild(popup); document.getElementById('doorPopup').style.cssText = 'width: 80vw; max-width: 800px; margin: auto; background-color: #000; padding: 20px; text-align: center; border: 4px outset #00f300; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0'") JS.eval ("var doorImage = document.createElement('img'); doorImage.src = '" + PlayGif + "'; doorImage.id = 'doorGif'; doorImage.style.cssText = 'max-width: 100%; max-height: 65vh; height: auto; display: block; margin: 20px auto; object-fit: contain; pointer-events: none'; document.getElementById('doorPopup').appendChild(doorImage)") JS.eval ("var okButton = document.createElement('button'); okButton.textContent = 'OK'; okButton.id = 'doorOkButton'; okButton.style.cssText = 'padding: 10px 20px; border: 4px outset #00f300; color: #00f300; background-color: #000; font-size: 16px; margin-top: 20px; cursor: pointer; font-family: \"Press Start 2P\"; border-radius: 0; text-align: center'; document.getElementById('doorPopup').appendChild(okButton)") JS.eval ("var audioElem = document.createElement('audio'); audioElem.src='" + PlaySound + "'; audioElem.autoplay=true; if(document.getElementById('divOutput')) { document.getElementById('divOutput').insertAdjacentElement('beforebegin', audioElem) } else { document.body.appendChild(audioElem) }") JS.eval ("function dismissPopup() { if(!document.getElementById('doorPopupOverlay')) return; document.body.removeChild(document.getElementById('doorPopupOverlay')) }") JS.eval ("document.getElementById('doorOkButton').onclick = function() { dismissPopup() }") JS.eval ("document.addEventListener('keydown', function(e) { if(e.key==='Enter' || e.keyCode===13) { dismissPopup() } })")

-vurt834

[Pertex]

function PopUpSound (image file, sound file)
PlayGif = GetFileURL(gif) 
PlaySound = GetFileURL(sound) 
JS.eval ("var overlay = document.createElement('div'); overlay.id = 'doorPopupOverlay'; document.body.appendChild(overlay)") 
JS.eval ("document.getElementById('doorPopupOverlay').style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000'") 
JS.eval ("var popup = document.createElement('div'); popup.id = 'doorPopup'; document.getElementById('doorPopupOverlay').appendChild(popup); document.getElementById('doorPopup').style.cssText = 'width: 80vw; max-width: 800px; margin: auto; background-color: #000; padding: 20px; text-align: center; border: 4px outset #00f300; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0'") 
JS.eval ("var doorImage = document.createElement('img'); doorImage.src = '" + PlayGif + "'; doorImage.id = 'doorGif'; doorImage.style.cssText = 'max-width: 100%; max-height: 65vh; height: auto; display: block; margin: 20px auto; object-fit: contain; pointer-events: none'; document.getElementById('doorPopup').appendChild(doorImage)") 
JS.eval ("var okButton = document.createElement('button'); okButton.textContent = 'OK'; okButton.id = 'doorOkButton'; okButton.style.cssText = 'padding: 10px 20px; border: 4px outset #00f300; color: #00f300; background-color: #000; font-size: 16px; margin-top: 20px; cursor: pointer; font-family: \"Press Start 2P\"; border-radius: 0; text-align: center'; document.getElementById('doorPopup').appendChild(okButton)") 
JS.eval ("var audioElem = document.createElement('audio'); audioElem.src='" + PlaySound + "'; audioElem.autoplay=true; if(document.getElementById('divOutput')) { document.getElementById('divOutput').insertAdjacentElement('beforebegin', audioElem) } else { document.body.appendChild(audioElem) }") 
JS.eval ("function dismissPopup() { if(!document.getElementById('doorPopupOverlay')) return;document.body.removeChild(document.getElementById('doorPopupOverlay')) }") 
JS.eval ("document.getElementById('doorOkButton').onclick = function() { dismissPopup() }") 
JS.eval ("document.addEventListener('keydown', function(e) { if(e.key==='Enter' || e.keyCode===13) { dismissPopup() } })") 

[vurt834]

Looks like you got it, but here's a txt file with no word wrapping. Just the contents of the function. This originally was a popup for when the player opens a door. But I changed it to a generic function.
PopupWithSound.txt