Hello,
I'm a novice JS/CSS/HTML programmer and I'm trying to use a uibuilder to create a multimedia display interface for an Escaper Room.
I'm having problems with HTML audio, I have put some code together starting from examples but it doesn't often work. In particular, when I refresh the uibuilder page, it does not work anymore: I can see metadata about the length of the audio loaded but it gets stuck at the start without reproducing. Something to to with preloading? The video work in a similiar way, but they work fine. I noted that even the videos, if I remove the "muted" flag, get stuck at the starting frame, even tough the "autoplay" is enabled.
The "src" of the audio is changed at execution time by some messages, switching from "file.mp3" to "" at command. I do that for the video and they play fine.
Do you have any suggestions?
Below, my uibuilder:
index.html:
<html lang="en">
<head>
<!-- Put your own custom styles in here -->
<link rel="stylesheet" href="./index.css" media="all">
<!-- Include Webfont to style text in custom font -->
<link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
</head>
<body>
<!-- The "app" element contains any content that receives dynamic updates -->
<div id="app">
<!-- Sounds -->
<audio autoplay controls id="audio-player" ref="audioRef">
<source src="" type="audio/mpeg" />
</audio>
<!-- Music -->
<audio autoplay controls style="top:600px" loop id="music-player" ref="musicRef">
<source src="" type="audio/mpeg" />
</audio>
<!-- Video Overlay-->
<video autoplay muted class="overlay" id="overlayVideo" ref="overlayRef">
<source src="" type="video/mp4" />
</video>
<!-- Video Background -->
<video autoplay muted loop class="background" id="backgroundVideo" ref="backgroundRef">
<source src="" type="video/mp4" />
</video>
<!-- Time -->
<div class="timerTextNormal" id="timerTextId">
{{msg.formattedTimeRemaining}}
</div>
<!-- Help -->
<div class="clueText">
{{msg.clueText}}
</div>
</div>
<!-- uibuilder script libraries -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>
<script src="./uibuilderfe.min.js"></script>
<!-- Put any additional custom code in here -->
<script src="./index.js"></script>
</body>
</html>
index.js:
lastAudioSrc = "";
lastMusicSrc = "";
lastBackgroundSrc = "";
lastOverlaySrc = "";
var app = new Vue({
// The HTML element to attach to
el: '#app',
// Variables defined here will be avalable and updated within the HTML
data: {
msg: '[No Message Received Yet]',
},
// Callback function when Vue library is fully loaded
mounted: function () {
// Start up uibuilder
uibuilder.start();
// Keep a reference to the Vue app
var vueApp = this;
// Callback triggered when node receives a (non-control) msg
uibuilder.onChange('msg', function (msg) {
vueApp.msg = msg;
/* Cambia stile del tempo rimasto, in base al tempo rimasto */
var timer_classes = document.getElementById('timerTextId').classList
if (msg.timeRemaining == 0)
{
/* Animazione quando scade! */
timer_classes.replace('timerTextNormal','timerTextGameOver');
timer_classes.replace('timerTextDanger', 'timerTextGameOver');
}
else
{
/* Torna normale quando il tempo rimasto è maggiore di 0 */
timer_classes.replace('timerTextGameOver', 'timerTextNormal');
if (msg.timeColour == "red")
{
timer_classes.replace('timerTextNormal', 'timerTextDanger');
}
else
{
timer_classes.replace('timerTextDanger', 'timerTextNormal');
}
}
/* Audio */
if (lastAudioSrc != msg.audioSrc)
{
vueApp.$refs.audioRef.src = msg.audioSrc;
lastAudioSrc = msg.audioSrc;
}
/* Musica */
if (lastMusicSrc != msg.musicSrc)
{
vueApp.$refs.musicRef.src = msg.musicSrc;
lastMusicSrc = msg.musicSrc;
}
/* Aggiorna sorgente video con quello scelto */
if (lastBackgroundSrc != msg.videoBackgroundSrc)
{
vueApp.$refs.backgroundRef.src = msg.videoBackgroundSrc;
lastBackgroundSrc = msg.videoBackgroundSrc;
}
/* Aggiorna sorgente video con quello scelto */
if (lastOverlaySrc != msg.videoOverlaySrc)
{
vueApp.$refs.overlayRef.src = msg.videoOverlaySrc;
lastOverlaySrc = msg.videoOverlaySrc;
}
});
},
});
