Hello everyone, I'm a beginner in this, but I've been working on this code for a while, which shows images randomly and with different speeds. For each image, a sound is played.
The problem I'm having is that when I play the code on some cell phones (usually iPhones), I'm forced to put the phone in ringer mode, and yet sometimes the sound doesn't play. I would like the sound to play even when in silent mode, with prior authorization from the user, as you can see:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Arial, sans-serif;
}
#imagen {
display: block;
margin: 2px auto 0;
max-width: 100%;
margin-top: 2px;
height: auto;
}
.btn {
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
margin-right: 10px;
}
.btn:hover {
background-color: #45a049;
}
select {
font-size: 16px;
padding: 8px;
border-radius: 5px;
border: 2px solid #ccc;
margin-right: 10px;
}
.label-dropdown {
display: inline-block;
margin-right: 5px;
}
#configuracion {
text-align: center;
margin-bottom: 0px;
}
#creditos {
text-align: center;
margin-top: 2px;
color: #666;
}
.mute-icon {
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="configuracion">
<select id="intervalo" onchange="cambiarIntervalo()">
<option disabled selected hidden>Speed interval</option>
...
</select>
<select id="cantidad" onchange="cambiarCantidad()">
<option disabled selected hidden>Number of Pads</option>
...
</select>
<button class="btn" id="startStopBtn" onclick="startStopRotation()">Start</button>
<img src="https://nacademysports.com/wp-content/uploads/2023/06/mute.png" id="muteIcon" class="mute-icon" onclick="toggleSound()">
</div>
<img src="https://nacademysports.com/wp-content/uploads/2023/06/PP.png" id="imagen" width="400" height="400">
<script>
var imagenes = [
...
];
var sonidos = [
...
];
var intervaloID; // variable global para almacenar el ID del intervalo
var rotationActive = false; // estado de la rotación (inicialmente detenida)
var cantidad = 8; // cantidad de imágenes a mostrar (valor por defecto)
var soundEnabled = false; // estado del sonido (inicialmente desactivado)
var context = new (window.AudioContext || window.webkitAudioContext)(); // instancia del contexto de audio
var gainNode = context.createGain(); // nodo de ganancia de audio
function rotarImagenes() {
var index = Math.floor(Math.random() * cantidad); // obtener un índice aleatorio
document.getElementById("imagen").src = imagenes[index]; // cambiar la imagen
if (soundEnabled) {
playSound(index); // reproducir el sonido correspondiente
}
}
async function playSound(index) {
try {
const response = await fetch(sonidos[index]);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await context.decodeAudioData(arrayBuffer);
const source = context.createBufferSource();
source.buffer = audioBuffer;
source.connect(gainNode);
gainNode.connect(context.destination);
source.start(0);
} catch (error) {
console.error('Error loading or playing audio:', error);
}
}
function cambiarIntervalo() {
var intervalo = document.getElementById("intervalo").value;
clearInterval(intervaloID); // limpiar el intervalo anterior
if (rotationActive) {
intervaloID = setInterval(rotarImagenes, intervalo); // establecer el nuevo intervalo
}
}
function cambiarCantidad() {
cantidad = parseInt(document.getElementById("cantidad").value);
clearInterval(intervaloID); // limpiar el intervalo anterior
if (rotationActive) {
var intervalo = document.getElementById("intervalo").value;
intervaloID = setInterval(rotarImagenes, intervalo); // establecer el nuevo intervalo
}
}
function startStopRotation() {
if (!rotationActive) {
rotationActive = true;
document.getElementById("startStopBtn").textContent = "Stop";
var intervalo = document.getElementById("intervalo").value;
intervaloID = setInterval(rotarImagenes, intervalo);
} else {
rotationActive = false;
document.getElementById("startStopBtn").textContent = "Start";
clearInterval(intervaloID);
}
}
function toggleSound() {
soundEnabled = !soundEnabled;
var muteIcon = document.getElementById("muteIcon");
if (soundEnabled) {
muteIcon.src = "https://nacademysports.com/wp-content/uploads/2023/06/unmute.png";
} else {
muteIcon.src = "https://nacademysports.com/wp-content/uploads/2023/06/mute.png";
}
}
</script>
</body>
</html>
I would like to know if someone with more experience can help me with this, and if you have any suggestions, I'd really appreciate it. Thank you so much.
The problem I'm having is that when I play the code on some cell phones (usually iPhones), I'm forced to put the phone in ringer mode, and yet sometimes the sound doesn't play. I would like the sound to play even when in silent mode, with prior authorization from the user, as you can see:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Arial, sans-serif;
}
#imagen {
display: block;
margin: 2px auto 0;
max-width: 100%;
margin-top: 2px;
height: auto;
}
.btn {
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
margin-right: 10px;
}
.btn:hover {
background-color: #45a049;
}
select {
font-size: 16px;
padding: 8px;
border-radius: 5px;
border: 2px solid #ccc;
margin-right: 10px;
}
.label-dropdown {
display: inline-block;
margin-right: 5px;
}
#configuracion {
text-align: center;
margin-bottom: 0px;
}
#creditos {
text-align: center;
margin-top: 2px;
color: #666;
}
.mute-icon {
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="configuracion">
<select id="intervalo" onchange="cambiarIntervalo()">
<option disabled selected hidden>Speed interval</option>
...
</select>
<select id="cantidad" onchange="cambiarCantidad()">
<option disabled selected hidden>Number of Pads</option>
...
</select>
<button class="btn" id="startStopBtn" onclick="startStopRotation()">Start</button>
<img src="https://nacademysports.com/wp-content/uploads/2023/06/mute.png" id="muteIcon" class="mute-icon" onclick="toggleSound()">
</div>
<img src="https://nacademysports.com/wp-content/uploads/2023/06/PP.png" id="imagen" width="400" height="400">
<script>
var imagenes = [
...
];
var sonidos = [
...
];
var intervaloID; // variable global para almacenar el ID del intervalo
var rotationActive = false; // estado de la rotación (inicialmente detenida)
var cantidad = 8; // cantidad de imágenes a mostrar (valor por defecto)
var soundEnabled = false; // estado del sonido (inicialmente desactivado)
var context = new (window.AudioContext || window.webkitAudioContext)(); // instancia del contexto de audio
var gainNode = context.createGain(); // nodo de ganancia de audio
function rotarImagenes() {
var index = Math.floor(Math.random() * cantidad); // obtener un índice aleatorio
document.getElementById("imagen").src = imagenes[index]; // cambiar la imagen
if (soundEnabled) {
playSound(index); // reproducir el sonido correspondiente
}
}
async function playSound(index) {
try {
const response = await fetch(sonidos[index]);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await context.decodeAudioData(arrayBuffer);
const source = context.createBufferSource();
source.buffer = audioBuffer;
source.connect(gainNode);
gainNode.connect(context.destination);
source.start(0);
} catch (error) {
console.error('Error loading or playing audio:', error);
}
}
function cambiarIntervalo() {
var intervalo = document.getElementById("intervalo").value;
clearInterval(intervaloID); // limpiar el intervalo anterior
if (rotationActive) {
intervaloID = setInterval(rotarImagenes, intervalo); // establecer el nuevo intervalo
}
}
function cambiarCantidad() {
cantidad = parseInt(document.getElementById("cantidad").value);
clearInterval(intervaloID); // limpiar el intervalo anterior
if (rotationActive) {
var intervalo = document.getElementById("intervalo").value;
intervaloID = setInterval(rotarImagenes, intervalo); // establecer el nuevo intervalo
}
}
function startStopRotation() {
if (!rotationActive) {
rotationActive = true;
document.getElementById("startStopBtn").textContent = "Stop";
var intervalo = document.getElementById("intervalo").value;
intervaloID = setInterval(rotarImagenes, intervalo);
} else {
rotationActive = false;
document.getElementById("startStopBtn").textContent = "Start";
clearInterval(intervaloID);
}
}
function toggleSound() {
soundEnabled = !soundEnabled;
var muteIcon = document.getElementById("muteIcon");
if (soundEnabled) {
muteIcon.src = "https://nacademysports.com/wp-content/uploads/2023/06/unmute.png";
} else {
muteIcon.src = "https://nacademysports.com/wp-content/uploads/2023/06/mute.png";
}
}
</script>
</body>
</html>
I would like to know if someone with more experience can help me with this, and if you have any suggestions, I'd really appreciate it. Thank you so much.
