<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La previa de una nueva radio</title>
<link rel="icon" href="img/favicon.png" type="image/png">
<meta property="og:title" content="La previa de una nueva radio">
<meta property="og:description" content="La previa de una nueva radio">
<meta property="og:image" content="https://laprevia.mph.fm/img/og-image.png">
<meta property="og:url" content="https://laprevia.mph.fm">
<meta property="og:type" content="website">
<script src="js/td-sdk.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geologica:slnt,wght,CRSV,SHRP@-12..0,100..900,0..1,0..100&display=swap" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-41GJQPD6CZ"></script>
<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-41GJQPD6CZ'); </script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px 0 0 0;
background-color: #44ABE2;
width:100%;
height:100%;
overflow: hidden;
}
.fullpage {
position:absolute;
width:100%;
height:100%;
top:0;
bottom:0;
right:0;
left:0;
}
button {
padding: 10px 20px;
margin: 10px;
font-size: 16px;
}
input[type="range"] {
width: 300px;
margin: 10px;
}
#onair {
margin-top: 20px;
font-size: 18px;
}
.contenedor {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:0;
}
.boton {
background-color: transparent;
border: none;
cursor: pointer;
max-width: 10em;
}
.boton img {
width: 100%;
height: auto;
}
input[type="range"] {
--colorBall: #d2087e;
appearance: none;
outline: none;
border-radius: 20px;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: var(--colorBall);
cursor: pointer;
}
.textos {
font-family: "Geologica", sans-serif;
font-weight: 700;
font-size: 50px;
color:#fff;
}
.textos-mobile {
display:none;
}
.texto1 {
position:absolute;
top:0px;
left:10px;
max-width:400px
}
.texto2 {
position:absolute;
bottom:0px;
right:10px;
max-width:500px;
}
.texto-top {
position:absolute;
top:0;
left: 50%;
transform: translate(-50%);
}
.texto-bottom {
position:absolute;
bottom:0;
right:0;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(200px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.textos img, .textos-mobile img {
width:100%;
height:auto;
animation-name: fadeInUp;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
#onair { font-family: "Geologica", sans-serif; min-height:70px;}
#onair span { display:block; }
.title { color:#fff; font-size:28px; font-weight: 900; line-height: 44px; }
.artist { color: #d2087e; font-size:20px; font-weight: 700; }
svg {
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
display: block;
}
@media (max-width: 720px) {
.textos {
display:none;
}
.textos-mobile {
display:block;
width:74%;
}
.title { font-size:18px; line-height: 20px; }
.artist { font-size:14px; }
}
</style>
</head>
<body>
<div class="fullpage">
<div class="insidepage">
<div class="textos texto1">
<img id="texto1" src="img/texto1-op1.png">
</div>
<div class="textos texto2">
<img id="texto2" src="img/texto2-op1.png">
</div>
<div class="textos-mobile texto-top">
<img id="texto-top" src="img/mobile-top-op1.png">
</div>
<div class="textos-mobile texto-bottom">
<img id="texto-bottom" src="img/mobile-bottom-op1.png">
</div>
<div class="contenedor">
<div class="botones">
<button id="boton" class="boton" onclick="switchAudio()">
<img id="img-boton" src="img/play.png">
</button>
</div>
<div class="info">
<input type="range" min="0" max="100" value="50" id="volume" oninput="setVolume(this.value/100);">
<div id="onair"></div>
</div>
<div id="td_container" style="display: none;"></div>
</div>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
<defs>
<linearGradient id="bg">
<stop offset="0%" style="stop-color:rgba(248, 248, 248, 0.3)"></stop>
<stop offset="100%" style="stop-color:rgba(248, 248, 248, 0)"></stop>
<!--
<stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)"></stop>
<stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)"></stop>
<stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)"></stop>
-->
</linearGradient>
<path id="wave" fill="url(#bg)" d="M-363.852,502.589c0,0,236.988-41.997,505.475,0s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" />
</defs>
<g>
<use xlink:href='#wave' opacity=".3">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="10s"
calcMode="spline"
values="270 230; -334 180; 270 230"
keyTimes="0; .5; 1"
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
repeatCount="indefinite" />
</use>
<use xlink:href='#wave' opacity=".6">
<animateTransform
attributeName="transform"
attributeType="XML"type="translate"
dur="8s"
calcMode="spline"
values="-270 230;243 220;-270 230"
keyTimes="0; .6; 1"
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
repeatCount="indefinite" />
</use>
<use xlink:href='#wave' opacty=".9">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="6s"
calcMode="spline"
values="0 230;-140 200;0 230"
keyTimes="0; .4; 1"
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
repeatCount="indefinite" />
</use>
</g>
</svg>
</div>
<script>
var player;
var isPlaying = false;
function switchAudio() {
if (isPlaying) {
stopAudio();
isPlaying = false;
} else {
playAudio();
isPlaying = true;
}
}
function setVolume(volume) {
if (player) {
if (volume == 0) {
stopAudio();
} else {
player.setVolume(volume);
}
} else {
console.log('Player is not initialized yet.');
}
}
function stopAudio() {
if (player) {
document.getElementById('img-boton').src = 'img/play.png';
document.getElementById('onair').innerHTML = '';
player.stop();
} else {
console.log('Player is not initialized yet.');
}
}
function playAudio() {
if (player) {
document.getElementById('img-boton').src = 'img/stop.png';
document.getElementById('volume').value = 50;
player.setVolume(0.5);
player.play( {
station: 'METRO',
trackingParameters: {
autoplay: 1
}
});
} else {
console.log('Player is not initialized yet.');
}
}
function initPlayerSDK() {
console.log( 'TD Player SDK is ready' );
var tdPlayerConfig = {
coreModules: [{
id: 'MediaPlayer',
playerId: 'td_container'
}],
playerReady: onPlayerReady,
configurationError: onConfigurationError,
moduleError: onModuleError,
adBlockerDetected: onAdBlockerDetected
};
player = new TDSdk( tdPlayerConfig );
}
/* Callback function called to notify that the SDK is ready to be used */
function onPlayerReady()
{
console.log("PLAYER READY");
player.addEventListener( 'track-cue-point', onTrackCuePoint );
}
/* Callback function called to notify that the player configuration has an error. */
function onConfigurationError( e ) {
console.log(e.data.errors);
}
/* Callback function called to notify that a module has not been loaded properly */
function onModuleError( e )
{
console.log(e.data.errors);
}
/* Callback function called to notify that a new Track CuePoint comes in. */
function onTrackCuePoint( e )
{
if (option == 1)
document.getElementById('onair').innerHTML = '<span class="title">' + e.data.cuePoint.cueTitle + '</span><span class="artist">' + e.data.cuePoint.artistName + '</span>';
else
document.getElementById('onair').innerHTML = '<span class="title">' + e.data.cuePoint.cueTitle + '</span><span class="artist" style="color:#44ABE2;">' + e.data.cuePoint.artistName + '</span>';
}
/* Callback function called to notify that an Ad-Blocker was detected */
function onAdBlockerDetected()
{
console.log( 'AdBlockerDetected' );
}
initPlayerSDK();
var option = 1;
if (Math.random() > 0.5) {
option = 2;
document.body.style.backgroundColor = "#E04334";
document.getElementById("volume").style.setProperty("--colorBall", "#44ABE2");
document.getElementById("texto1").src = "img/texto1-op2.png";
document.getElementById("texto2").src = "img/texto2-op2.png";
document.getElementById("texto-top").src = "img/mobile-top-op2.png";
document.getElementById("texto-bottom").src = "img/mobile-bottom-op2.png";
}
console.log(Math.random());
</script>
</body>
</html>