<?php
// envivo.php (PHP 8.2)
// - Sin mysql_* (removido en PHP 7+)
// - Sin short tags 

require_once 'concha.php';
require_once 'concha_extras.php';
require_once 'lang_es_no_panel.php';

if (empty($lang_actual)) { $lang_actual = 'es'; }

/**
 * Asegurar conexión mysqli ($conn).
 * Si concha.php / concha_extras.php ya define $conn como mysqli, se reutiliza.
 * Si no, se crea aquí con $host/$usuario/$contra/$basedatos.
 */
if (!isset($conn) || !($conn instanceof mysqli)) {
    mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
    $conn = new mysqli($host, $usuario, $contra, $basedatos);
    $conn->set_charset('utf8mb4');
} else {
    // por si viene seteado a utf8 viejo
    @$conn->set_charset('utf8mb4');
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $nombresitio ?> - EN VIVO</title>

<!-- LINKS A GOOGLE FONTS -->
<?php $link_titulo = str_replace('http://', 'https://', $link_titulo); ?>
<?php echo $link_titulo; ?>
<?php $link_menu = str_replace('http://', 'https://', $link_menu); ?>
<?php echo $link_menu; ?>
<?php $link_bajada = str_replace('http://', 'https://', $link_bajada); ?>
<?php echo $link_bajada; ?>

<link rel="shortcut icon" href="<?php echo $dom ?>/icono.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">

<style>
    .bg-lightuu {
        box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.68);
        -webkit-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.68);
        -moz-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.68);
    }
    body {
        <?php
            $e  = substr((string)$d_color_fondo, 0, 1);
            $e1 = substr((string)$d_color_fondo, 0, 4);

            if ($e === '#') {
        ?>
                background-color:<?php echo $d_color_fondo ?>;
        <?php
            } else {
                if ($e1 === 'http') {
        ?>
                    background-image:url(<?php echo $d_color_fondo ?>);
                    background-repeat:repeat;
        <?php
                } else {
        ?>
                    background-image: url("https://recursos.radiosnethosting.com/fondos/<?php echo $d_color_fondo ?>");
                    background-attachment: fixed;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
        <?php
                }
            }
        ?>
        overflow-x: hidden;
        margin: 0 auto;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    h1,h2,h3,h4,h5,h6{
        margin-bottom: 10px;
        line-height: 1.1em;
        font-weight: 600;
        margin-top: 0;
        color: <?php echo $d_color_menu?>!important;
        font-family: <?php echo $style_titulo ?>!important;
    }
    i{
        margin-bottom: 10px;
        line-height: 1.1em;
        font-weight: 600;
        margin-top: 0;
        color: <?php echo $d_color_menu?>!important;
    }
    p{ font-family: <?php echo $style_bajada ?>!important; }
    .h3, h3{ font-size: 1rem; }
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ display:block; color: <?php echo $d_color_menu?>; }
    a:hover{ color: <?php echo $d_color_menu_sobre?>; }
    a:link,a:visited,a:active,a:focus,a:before,a:after{
        outline:0 none;
        text-decoration:none;
        color: <?php echo $d_color_menu?>;
    }
    iframe{ background:#fff; }
    .navbar-nav .dropdown-menu{
        position:absolute;
        background-color: <?php echo $d_color_fondo_menu?>;
    }
    .dropdown:hover>ul{ display:block !important; }
    .dropdown ul li a{ color: <?php echo $d_color_menu?>; }
    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav{
        color: <?php echo $d_color_menu ?>;
    }
    .nav-link:hover{ color: <?php echo $d_color_menu_sobre ?>; }
    #logo{ max-width:3.2rem; }
    #logo:hover path{ fill: <?php echo $d_color_menu ?>; }
    #logo:hover{ color: <?php echo $d_color_menu_sobre ?>; }
    #logo2{ fill: <?php echo $d_color_weather2 ?>; max-width:48px; }
    #logo3{ fill: <?php echo $d_color_weather2 ?>; max-width:18px; }
    .color{ color: <?php echo $d_color_menu?>; }
    .btn-outline-primary.active,
    .btn-outline-primary:active,
    .show>.btn-outline-primary.dropdown-toggle{
        color: <?php echo $d_color_fondo_menu ?>;
        background-color: <?php echo $d_color_menu ?>;
        border:3px solid <?php echo $d_color_fondo_menu ?>;
    }
    .btn-outline-primary:hover{
        color: <?php echo $d_color_fondo_menu ?>;
        background-color: <?php echo $d_color_menu ?>;
        border:3px solid <?php echo $d_color_fondo_menu ?>;
    }
    .btn-outline-primary{
        color: <?php echo $d_color_menu ?>;
        background-color: <?php echo $d_color_fondo_menu ?>;
        border:3px solid transparent;
    }
    footer p{
        margin-bottom:.25rem;
        color: <?php echo $d_color_menu ?>;
        font-weight:300;
    }
    .facebook{
        display:block;
        float:right;
        background: <?php echo $d_color_menu ?>;
        margin-right:37px !important;
    }
    .twitter{
        display:block;
        float:right;
        background: <?php echo $d_color_menu ?>;
    }
    .flickity-page-dots .dot{ background: <?php echo $d_color_menu ?>; }
    .sidebar{ will-change:min-height; }
    .sidebar__inner{
        transform: translate(0,0);
        transform: translate3d(0,0,0);
        will-change: position, transform;
    }
    .sidebar .widget .widget-title{ font-size:20px; }

    <?php
    $hexa = substr((string)$d_color_fondo_menu, 1);
    $decimal = hexdec($hexa ?: '0');
    if ($decimal <= 10066329) { $color_titulo_barra = "250,250,250,0.9"; }
    else { $color_titulo_barra = "0,0,0,0.9"; }
    ?>

    .widget-head{ background-color: <?php echo $d_color_fondo_menu?> !important; }
    .widget-title{
        font-size:25px;
        font-weight:900;
        line-height:1;
        text-transform:uppercase;
        margin-bottom:0;
        color: <?php echo $d_color_menu ?>;
        font-family: <?php echo $style_titulo ?>;
    }
    .topbar{
        border-bottom:0;
        background-color: <?php echo $d_color_fondo_menu ?>;
        color: <?php echo $d_color_menu ?>;
    }
    .header{
        min-height:130px;
        display:flex;
        align-items:center;
        <?php if ($textura==NULL && $logo_g==NULL) { ?>
            background-color: <?php echo $d_color_fondo_cabecera ?>;
        <?php } elseif($textura != NULL) { ?>
            background-position:center center;
            background-size:cover;
            background-repeat:no-repeat;
            background-image:url(<?php $textura = str_replace("www.radiosnet.com.ar","recursos.radiosnethosting.com",$textura); echo $textura ?>);
            -moz-background-size:cover;
            -webkit-background-size:cover;
        <?php } else { ?>
            background-position:center center;
            background-size:cover;
            background-repeat:no-repeat;
            background-image:url(<?php echo $logo_g ?>);
            -moz-background-size:cover;
            -webkit-background-size:cover;
        <?php } ?>
        clear:both;
    }
    .header-right{ float:right; }
    .logo{ max-width:80%; }
    .bg-light{ background-color:#fff !important; }
    article{ background:transparent; }
    .colorTitulo{
        color: <?php echo $d_color_titulo ?>;
        font-weight:800;
        letter-spacing:1px;
    }
    .facebook{
        display:block;
        float:right;
        background-color: <?php echo $color_cat ?> !important;
        margin-right:37px !important;
    }
    .twitter{
        display:block;
        float:right;
        background-color: <?php echo $color_cat ?> !important;
    }
    p.displaytitulo{
        height:0;
        margin:0;
        font-family:'Montserrat', sans-serif !important;
        letter-spacing:1px;
    }
    .carousel-caption{
        z-index:10;
        padding:4px 20px;
        background-color: <?php echo $d_color_fondo_menu ?>99;
    }
    .carousel-caption h2{
        color: <?php echo $d_color_menu ?> !important;
        font-weight:700;
        margin:0;
        font-size:2.5vw;
    }
    .localidad{
        font-family: <?php echo $style_titulo ?>;
        color: <?php echo $d_color_weather2?>;
        line-height:1;
    }
    .titulo{
        display:none;
        position:absolute;
        bottom:0;
        height:100%;
        width:100%;
        padding:20px 15px;
        background-color: <?php echo $d_color_fondo_menu ?>;
        opacity:0.7;
    }
    .cub3r-caption{
        position:absolute;
        bottom:0;
        left:0;
        background-color: <?php echo $d_color_menu?>;
        width:100%;
        padding:0.5rem 0.75rem;
    }
    .cub3r-caption-text{ color: <?php echo $d_color_menu?> !important; }
    .html-marquee{
        font-weight:200;
        height:40px !important;
        width:100%;
        background-color:transparent !important;
        font-family:'Montserrat', sans-serif !important;
        font-size:inherit !important;
        color: <?php echo $d_color_menu ?> !important;
        letter-spacing:0.5px;
    }
    marquee p{ color: <?php echo $d_color_menu ?> !important; }
    .texto-fecha{ color: <?php echo $d_color_menu?>; }
    .navbar-toggler-icon{ color: <?php echo $d_color_menu?>; }
</style>
</head>

<body class="">
<div class="container p-3">
    <div class="row d-flex align-items-center" style="background:<?php echo $d_color_fondo_menu?>!important;">
        <div class="col-12 col-sm-12 col-md-6">
            <div class="col-12">
                <a href="<?php echo $dom ?>/principal.php" target="_blank" style="display:block;">
                    <div class="text-center" style="padding-top:25px;">
                        <img class="img-fluid" src="<?php $logo_C = str_replace('http://', 'https://', $logo_C); echo $logo_C; ?>" style="max-width: 300px;" alt="Logo">
                    </div>
                </a>
            </div>

            <div class="col-12 text-center">
                <?php
                $D = date('d');
                $A = date('Y');
                $M = date('m');
                $date = "$A$M$D";

                $A = substr($date, 0, 4);
                $M = substr($date, 4, 2);
                $D = substr($date, 6, 2);

                if ($M == '01') {$m = "enero";}
                if ($M == '02') {$m = "febrero";}
                if ($M == '03') {$m = "marzo";}
                if ($M == '04') {$m = "abril";}
                if ($M == '05') {$m = "mayo";}
                if ($M == '06') {$m = "junio";}
                if ($M == '07') {$m = "julio";}
                if ($M == '08') {$m = "agosto";}
                if ($M == '09') {$m = "septiembre";}
                if ($M == '10') {$m = "octubre";}
                if ($M == '11') {$m = "noviembre";}
                if ($M == '12') {$m = "diciembre";}

                function dame_el_dia2($fecha) {
                    $array_dias = [
                        'Sunday'    => "domingo",
                        'Monday'    => "lunes",
                        'Tuesday'   => "martes",
                        'Wednesday' => "miercoles",
                        'Thursday'  => "jueves",
                        'Friday'    => "viernes",
                        'Saturday'  => "sabado",
                    ];
                    $k = date('l', strtotime($fecha));
                    return $array_dias[$k] ?? '';
                }

                $dia = dame_el_dia2($date);
                $hay_programa = 'no';

                // Hora actual formato Hi (ej: 1930)
                $hora = (int)date('Hi');

                $ID_P = 0;
                $ini2 = '';
                $fin2 = '';
                $nombre_pro = '';
                $imagen = '';
                $url = '';

                // Buscar programa vigente (programacion + programas)
                $st = $conn->prepare("SELECT programa, ini, fin FROM programacion WHERE dia = ?");
                $st->bind_param('s', $dia);
                $st->execute();
                $rs = $st->get_result();

                while ($row = $rs->fetch_assoc()) {
                    $ini = (int)str_replace('.', '', (string)$row['ini']);
                    $fin = (int)str_replace('.', '', (string)$row['fin']);

                    if ($hora > $ini && $hora < $fin) {
                        $ID_P = (int)$row['programa'];
                        $ini2 = (string)$row['ini'];
                        $fin2 = (string)$row['fin'];
                        break;
                    }
                }
                $rs->free();
                $st->close();

                if ($ID_P > 0) {
                    $st2 = $conn->prepare("SELECT nombre, imagen, url FROM programas WHERE ID = ?");
                    $st2->bind_param('i', $ID_P);
                    $st2->execute();
                    $rs2 = $st2->get_result();
                    if ($row2 = $rs2->fetch_assoc()) {
                        $nombre_pro = (string)$row2["nombre"];
                        $imagen     = (string)$row2["imagen"];
                        $url        = (string)$row2["url"];
                        $hay_programa = 'si';
                    }
                    $rs2->free();
                    $st2->close();
                }
                ?>

                <div class="row" style="margin:30px auto;">
                    <?php if (!empty($imagen)) { ?>
                        <div class="col-12" style="text-align:center;padding:10px;">
                            <img src="<?php echo $dom; ?>/upload_pic/resize_<?php echo $imagen; ?>.jpg" class="img-fluid" alt="">
                        </div>
                    <?php } ?>

                    <div class="col-12" style="padding:10px">
                        <div class="col-12 col-lg-12" style="padding:0px">
                            <?php
                            $port1 = substr((string)$ip_stream, 19);

                            if ($logo_movil == 'no' || $logo_movil == '') {
                                $android = "https://play.google.com/store/apps/details?id=com.radiosar.full";
                            } else {
                                $android = (string)$logo_movil;
                            }

                            $bb     = "rtsp://sisteplay1.streamwowza.com:1935/radiohd/$port1";
                            $iphone = "http://sisteplay1.streamwowza.com:1935/radiohd/$port1/playlist.m3u8";
                            $pls    = "$ip_stream/listen.pls";
                            $usuario_stream = $pls;
                            ?>

                            <div align="">
                                <div style="text-align:center;">
                                    <audio id="player" src="<?php echo $ip_stream ?>" type="audio/mp3" ontimeupdate="updateProgress();">
                                        <source id="source">
                                        Audio no soportado
                                    </audio>
                                </div>

                                <div id="controls">
                                    <div class="timer d-none" id="timer"></div>

                                    <div class="volumen d-flex justify-content-center align-items-center">
                                        <i class="fas fa-volume-down p-2"></i>
                                        <input type="range" name="volumen" id="volumen" min="0" max="1" step="0.01" value="0.75">
                                        <i class="fas fa-volume-up p-2"></i>
                                    </div>

                                    <i class="d-none fas fa-backward fa-5x" onclick="prevMusic();"></i>
                                    <i class="far fa-play-circle fa-5x" onclick="togglePlay();" id="iconPlay"></i>
                                    <i class="d-none fas fa-forward fa-5x" onclick="nextMusic();"></i>

                                    <span id="currentPlay" class="d-none"></span>
                                    <progress class="d-none" id="progress" value="0" max="100"></progress>
                                    <div id="playList" class="d-none"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <?php if ($hay_programa != 'no') { ?>
                        <div class="col-12 text-center" style="padding:10px;">
                            <h4 style="margin-top: 5px;margin-bottom:0;color:#000;font-weight:600;">Escuchá la radio</h4>
                            <h2 style="margin-bottom:0;text-transform:uppercase;font-weight:700;color:#000" class=""><?php echo $nombre_pro ?></h2>
                            <h4 style="margin-bottom:0;padding-bottom:0;color:#000;font-weight:600;"><?php echo $ini2 ?>hs. a <?php echo $fin2 ?>hs.</h4>
                        </div>
                    <?php } ?>
                </div>
            </div>

            <div class="col-12 text-center">
                <div class="col-12 col-md-12 col-lg-12">
                    <ul class="" role="group" style="padding:0px;">
                        <a href="<?php echo $facebook ?>" class="topbar-header-social" target="_blank"><i class="fab fa-facebook" style="font-size: 41px; padding-left: 10px;"></i></a>
                        <a href="<?php echo "https://twitter.com/".$twitter_btn ?>" class="topbar-header-social" target="_blank"><i class="fab fa-twitter" style="font-size: 41px; padding-left: 10px;"></i></a>
                        <a href="<?php echo "https://instagram.com/".$social_aim ;?>" class="topbar-header-social" target="_blank"><i class="fab fa-instagram" style="font-size: 41px; padding-left: 10px;"></i></a>
                        <a href="<?php echo $social_youtube ?>" class="topbar-header-social" target="_blank"><i class="fab fa-youtube" style="font-size: 41px; padding-left: 10px;"></i></a>
                    </ul>
                </div>
            </div>

            <?php
            // Publicidades
            $stp = $conn->prepare("SELECT ID, img, carpetafoto, url FROM publicidades_gif WHERE lugar = ?");
            $lugar = '700';
            $stp->bind_param('s', $lugar);
            $stp->execute();
            $rsp = $stp->get_result();

            while ($row = $rsp->fetch_assoc()) {
                $img        = (string)$row["img"];
                $carpetafoto= (string)$row["carpetafoto"];
                $url_pub    = (string)$row["url"];

                $ext = strtolower(substr($img, -3));
                ?>
                <a href="<?php echo $url_pub ?>" target="_blank">
                    <?php if ($ext === 'mp4') { ?>
                        <div class="col-12 p-0 text-center mb-3">
                            <video autoplay muted loop style="width:100%">
                                <source src="<?php echo $dom ?>/<?php echo $carpetafoto ?>/<?php echo $img ?>" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    <?php } else { ?>
                        <div class="col-12 p-0 text-center mb-3">
                            <img class="img-fluid" src="<?php echo $dom ?>/<?php echo $carpetafoto ?>/<?php echo $img ?>" alt="">
                        </div>
                    <?php } ?>
                </a>
                <?php
            }
            $rsp->free();
            $stp->close();
            ?>
        </div>

        <div class="col-12 col-sm-12 col-md-6 p-3">
            <?php if ($comentarios == 'facebook') { ?>
                <iframe style="width:100%;min-height:500px;" src="<?php echo $dom ?>/chatface.php" marginheight="0" marginwidth="0" frameborder="0"></iframe>
            <?php } else { ?>
                <form action="<?php echo $dom; ?>/formchat.php" method="post">
                    <div class="col-12">
                        <div><h3>Comentarios y mensajes</h3></div>
                        <div>
                            <iframe name="I1" style="width:100%;min-height:500px;" src="<?php echo $dom; ?>/chat.php" border="0" frameborder="0"><?php echo $lang_100026?></iframe>
                        </div>

                        <div><h3>Comentá</h3></div>

                        <div style="margin-top:10px;">
                            <input name="nombre" type="text" class="form-control" id="nombre"
                                   value="<?php echo $lang_tu_nombre ?>"
                                   onfocus="if (this.value == '<?php echo $lang_tu_nombre ?>') {this.value = '';}"/>
                        </div>

                        <div style="margin-top:10px;">
                            <textarea name="mensaje" class="form-control" cols="15" rows="2" id="mensaje"
                                      onfocus="if (this.value == 'Mensaje') {this.value = '';}"><?php echo $lang_100027?></textarea>
                        </div>

                        <?php if ($comentarios == 'captcha') { ?>
                            <br />
                            <style>
                                #recaptcha_image, #recaptcha_image img{ width: 200px !important; cursor: pointer; }
                                #recaptcha_image img:hover{ position: absolute; width: 300px !important; }
                                .recaptcha_only_if_image, .recaptcha_only_if_audio{ display: block; }
                            </style>

                            <script type="text/javascript">
                                var RecaptchaOptions = { theme : 'custom', custom_theme_widget: 'recaptcha_widget' };
                            </script>

                            <div id="recaptcha_widget" style="display:none">
                                <div id="recaptcha_image"></div>
                                <div class="recaptcha_only_if_incorrect_sol" style="color:red"><?php echo $lang_100028 ?></div>
                                <input type="text" id="recaptcha_response_field" class="form-control" name="recaptcha_response_field" />
                                <div><a href="javascript:Recaptcha.reload()"><?php echo $lang_100029 ?></a></div>
                            </div>

                            <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LdAWMESAAAAAHpz874QmLV5K9eiTJJbr6Pha0Qe"></script>
                            <noscript>
                                <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdAWMESAAAAAHpz874QmLV5K9eiTJJbr6Pha0Qe" height="100" width="200" frameborder="0"></iframe><br>
                                <textarea name="recaptcha_challenge_field" rows="3" class="form-control" cols="40"></textarea>
                                <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                            </noscript>
                        <?php } ?>

                        <div align="center" style="margin-top:10px;">
                            <input name="Submit2" type="submit" class="btn btn-outline-primary btn-block my-2 my-sm-0"
                                   value="<?php echo $lang_enviar ?><?php echo $idioma_enviar ?>" />
                        </div>
                    </div>
                </form>
            <?php } ?>
        </div>
    </div>
</div>

<?php include '../google.php'; ?>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<script>
//Array con el listado de canciones a mostrar en el reprodutor
const canciones = [ "bensound-summer.mp3" ]
var indiceActual = new Array(1)

//Funcion para crear mediante javascript el listado de canciones
function crearPlayList(){
    const listado = document.createElement('ol')
    listado.setAttribute("id", 'listadoMusica')
    for (let i = 0; i<canciones.length; i++){
        const item = document.createElement('li')
        item.appendChild(document.createTextNode(canciones[i]))
        item.setAttribute("id", canciones.indexOf(canciones[i]))
        listado.appendChild(item)
    }
    return listado
}
document.getElementById('playList').appendChild(crearPlayList())

var listadoMusica= document.getElementById('listadoMusica')
listadoMusica.onclick = (e) =>{
    const itemClick = e.target
    removeActive()
    itemClick.classList.add("active");
    reproduccionActual("Reproduciendo: "+ itemClick.innerText)
    loadMusic(itemClick.innerText)
    player.play()
    indiceActual[0]= e.target.id
    classIconPlay();
}

//Funcion para cambiar el icono del reprodutor
function classIconPlay(){
    var element = document.getElementById("iconPlay")
    element.classList.remove("fa-pause-circle");
    element.classList.add("fa-play-circle");
}

//Funcion para control del volumen
const volumen= document.getElementById("volumen")
volumen.oninput= (e) =>{
    const vol = e.target.value
    player.volume = vol;
}

//Funcion para actualizar la barra de progreso del reprodutor
const updateProgress = () =>{
    if (player.currentTime >0){
        const barra = document.getElementById('progress')
        barra.value = (player.currentTime / player.duration) * 100

        var duracionSegundos= player.duration.toFixed(0);
        dura=secondsToString(duracionSegundos);
        var actualSegundos = player.currentTime.toFixed(0)
        actual=secondsToString(actualSegundos);

        duracion= actual +' / '+ dura
        document.getElementById('timer').innerText=duracion
    }
    if (player.ended){
        nextMusic();//Reproducir la siguiente pista
    }
}

//Funcion para reproducir la proxima cancion
function nextMusic(){
    const source = document.getElementById('source');
    var musicaActual= Number(indiceActual[0]);
    if (canciones.length == (musicaActual+1)){
        var siguiente = 0
    } else {
        var siguiente = musicaActual + 1
    }
    removeActive()
    var item=document.getElementById(siguiente)
    item.classList.add("active");
    loadMusic(canciones[siguiente]);
    player.play()
    indiceActual[0]= siguiente
    reproduccionActual("Reproduciendo: "+ canciones[siguiente])
    classIconPlay()
}

//Funcion para reproducir la cancion anterior
function prevMusic(){
    const source = document.getElementById('source');
    var musicaActual= Number(indiceActual[0]);
    if (musicaActual==0){
        var anterior= canciones.length - 1
    } else {
        var anterior = musicaActual - 1
    }
    removeActive()
    var item=document.getElementById(anterior)
    item.classList.add("active");
    loadMusic(canciones[anterior]);
    player.play()
    indiceActual[0]= anterior
    reproduccionActual("Reproduciendo: "+ canciones[anterior])
    classIconPlay()
}

//Funcion para remover todas las clases css activas
function removeActive(){
    var elems = document.querySelectorAll(".active");
    [].forEach.call(elems, function(el) {
        el.classList.remove("active");
    });
    return elems
}

//Funcion para mostrar el nombre del arhivo actual en reproduccion
function reproduccionActual(texto){
    document.getElementById('currentPlay').innerText=texto
}

//Funcion para cargar las canciones en el reproductor
function loadMusic(ruta){
    var source = document.getElementById('source')
    var folder ="audio";//Carpeta donde tenemos almancenada la musica
    source.src= folder+"/"+ruta
    var index= indiceActual[0]= canciones.indexOf(ruta)
    removeActive()
    var item=document.getElementById(index)
    item.classList.add("active");
    reproduccionActual("Reproduciendo: "+ ruta)
    player.load()
}

//Funcion para pausar o darle play
function togglePlay() {
    if (player.paused){
        toggleIcon();
        return player.play();
    } else {
        toggleIcon();
        return player.pause();
    }
}

//Funcion para cambiar el icono play o pause
function toggleIcon() {
   var element = document.getElementById("iconPlay");
   element.classList.toggle("fa-pause-circle");
   element.classList.toggle("fa-play-circle");
}

//Funcion para que al dar click sobre la barra de progeso se permita adelantar
progress.addEventListener('click', adelantar);
function adelantar(e){
    const scrubTime = (e.offsetX / progress.offsetWidth) * player.duration;
    player.currentTime = scrubTime;
    sonsole.log(e);
}

//Funcion para convertir segundos a minutos y horas
function secondsToString(seconds) {
    var hour="";
    if (seconds>3600){
        hour = Math.floor(seconds / 3600);
        hour = (hour < 10)? '0' + hour : hour;
        hour+=":"
    }
   var minute = Math.floor((seconds / 60) % 60);
  minute = (minute < 10)? '0' + minute : minute;
  var second = seconds % 60;
  second = (second < 10)? '0' + second : second;
  return hour  + minute + ':' + second;
}
loadMusic(canciones[0])
</script>
</body>
</html>
