I am building a website using html, css and bootstrap for my podcast, my problem is that I want to put a player of the podcast in the hero image part of the website so people can come and listen to my podcast at the moment of entering into the website. I want the player to use the RSS Feed of my podcast to always update the player with the latest episode, I hace been trying to look for a solution for that but I have found anything. I made an account here on stack overflow to reach some expert on this field to help me with this problem. I will attach some pictures of the design to illustrate my problem much better:
I just need it to play the podcast and get updated every time I upload a new episode.
I put my code of what I have until now to see if is of help to resolve this. Thanks you all!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Sealights Designs">
<meta name="description" content="El Podcast Libertario es el lugar donde aprendes a recuperar tu libertad de pensamiento, donde hablamos temas desde filosofia hasta economia y como tu, el individuo, puedes ser mas feliz con mas libertad">
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- Title -->
<title>Podcast Libertario - Inicio</title>
<!-- Links -->
<link rel="shortcut icon" type="image/png" href="favicon.ico/favicon-16x16.png"/>
<link rel="stylesheet" href="css/inicio.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>
<!-- Scripst -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<header class="container-fluid">
<nav class="navbar navbar-transparent "> <a class="navbar-brand" href="#"> <img src="images/Podcast Libertario Logo.svg" alt="logo"/> </a> </nav>
<div class="nav">
<ul>
<li><a class="nav-item nav-link text-white" href="#">Inicio</a></li>
<li><a class="nav-item nav-link text-white" href="#">Episodios</a></li>
<li><a class="nav-item nav-link text-white" href="#">Blog</a></li>
<li><a class="nav-item nav-link text-white" href="#">Descargas</a></li>
<li><a class="nav-item nav-link text-white text-nowrap" href="#">Sobre Nosotros</a></li>
<li><a class="nav-item nav-link text-white" href="#">Contacto</a></li>
</ul>
</div>
</header>
<article class="conteiner-fluid">
<div id="heroImage" class="d-flex justify-content-center">
<aside> <img src="images/Copia de logolittle.jpg" width="400" height="400" alt="Cover"/>
<audio controls>
<source src="http://cast.rocks/hosting/24334/85-Himno-destazandolibros.mp3" type="audio/mpeg">
</audio>
</aside>
</div>
<section class="d-flex justify-content-center"> <a href="#anfitriones container-fluid">
<svg id="Component_6_1" data-name="Component 6 – 1" xmlns="http://www.w3.org/2000/svg" width="36" height="19" viewBox="0 0 35.604 18.918">
<path id="Path_2055" data-name="Path 2055" d="M36.732,13.515,39.853,10H4.249L7.2,13.515l14.759,15.4Z" transform="translate(-4.249 -10)" fill="#ffe064"/>
</svg>
</a> </section>
</article>
</div>
<section id="calltoaction" class="container-fluid">
<p id="Calltoaction" class="d-flex justify-content-center">¡ESCUCHANOS EN TODAS LAS PLATAFORMAS!</p>
<div class="platfomrs d-flex justify-content-center">
<ul>
<a class="d-inline-flex" href="#"><img src="images/icons8-spotify@2x.png" width="63" height="63" alt="Spotify"/></a>
<a class="d-inline-flex" href="#"><img src="images/icons8-browse-podcasts-96@2x.png" width="63" height="63" alt="Apple Podcast"/></a>
<a class="d-inline-flex" href="#"><img src="images/google_podcast_icon_135536@2x.png" width="63" height="63" alt="Google Podcast"/></a>
<a class="d-inline-flex" href="#"><img src="images/ivoox@2x.png" width="63" height="63" alt="iVoox"/></a>
</ul>
</div>
</section>
<blog>
<p class="titulo d-flex justify-content-center">BLOG LIBERTARIO</p>
<div id="blog">
<a><img src="images/Prometheus Justin Kendall's Prometheus -1.png" width="678" height="637" alt=""/></a>
<a><img src="images/superficialidad iceberg.png" width="687" height="319" alt=""/></a>
<a><img src="images/observacion de la realidad binoculars@2x.png" width="343.5" height="300" alt=""/></a>
<a><img src="images/Lo que una amiga...L-1.png" width="343.5" height="300" alt=""/></a>
</div>
</blog>
</body>
<footer></footer>
</html>