如何使用 RSS Feed 为 Podcast 创建播放器？

如何解决如何使用 RSS Feed 为 Podcast 创建播放器？

我正在使用 html、css 和 bootstrap 为我的播客建立一个网站，我的问题是我想将播客的播放器放在网站的英雄图像部分，这样人们就可以来听我的播客进入网站的那一刻。我希望播放器使用我的播客的 RSS 提要总是用最新的剧集更新播放器，我一直试图寻找解决方案，但我找到了任何东西。我在堆栈溢出上做了一个帐户，以联系该领域的一些专家来帮助我解决这个问题。我将附上一些设计图片以更好地说明我的问题：So this is how I want it to look like我只需要它来播放播客并在每次上传新剧集时得到更新。

我把我的代码放在了现在，看看是否有助于解决这个问题。谢谢大家！

@charset "utf-8";
/* CSS Document */
.wrapper {
  background: transparent linear-gradient(180deg,#07050B 0%,#18191F 48%,#2A2E34 100%) 0% 0% no-repeat padding-box;
    margin-top: -60px;
    padding-top: 40px;
}
.navbar {
  margin: 62px auto auto 141px;
}
.navbar-brand img {
  max-width: 60%;
}
.nav ul {
  margin: -45px auto auto;
  padding-left: 700px;
  list-style: none;
  display: table;
  width: 38px;
  text-align: left;
}
.nav li {
  display: table-cell;
  position: relative;
  padding-right: 10px;
}
.nav a {
  color: #fff;
  text-decoration: none;
  display: flex;
  position: relative;
  font-size: 14px;
}
.nav a:after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  left: 10%;
  position: absolute;
  background: #FFE064;
  transition: 0.1s ease 0s,center 0.3s ease 0s;
  width: 0;
}
.nav a:hover:after {
  width: 100%;
  left: 1px;
}
.nav a:hover {
  font-weight: bold;
}
#Component_6_1 {
     scroll-behavior: smooth;
    display: flex;
    margin-bottom: 30px;    
}
#heroImage {
    padding-top: 140px;
    padding-bottom: 160px;
}
#Calltoaction{
    font-size: 45px;
    font-weight: 900;
    letter-spacing: 4px;
}
.platfomrs {
    margin-right: 80px;
}
.platfomrs a {
    padding-left: 21px;
}
#calltoaction {
    background-color: #FFE064;
}
.titulo {
    font-size: 45px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-top: 75px;
}
#blog {
    display: flex;
}

<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>

如何使用 RSS Feed 为 Podcast 创建播放器？

如何解决如何使用 RSS Feed 为 Podcast 创建播放器？

相关推荐