Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- Featured Audio

Articles with Audio

Listening to articles is available to subscribers. Sign in to listen or subscribe today!

Browse all articles with audio

      <h2 class="featured-audio-title">Articles with Audio</h2>
<section class="home-featured-audio">
  <div class="featured-audio-no-access">
    <p class="featured-audio-no-access-text">Listening to articles is available to subscribers. <a href="#" class="featured-audio-no-access-link">Sign in</a> to listen or <a href="#" class="featured-audio-no-access-link">subscribe today</a>!</p>
  </div>
  <ul class="featured-audio-list">
    
    
    
    
    <li class="featured-audio-item active">
      <div class="featured-audio-element">
        <img class="featured-audio-img b-lazy" src="/fa_prototype/assets/images/audio-thumb.png" alt="" >
        <div class="featured-audio-expand">
          <span class="featured-audio-expand-play">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </span>
          <span class="featured-audio-expand-pause">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </span>
        </div>
        <time class="featured-audio-date">July 16th, 2017</time>
        <h3 class="featured-audio-item-title">
          
            The Myth of the Limited Strike on North Korea
          
        </h3>
        <h4 class="featured-audio-author">James Crabtree</h4>
        <hr class="clearfix">
        <div class="audio-controls">
          <a href="javascript:void(0)" class="audio-control skip-back playDisabled">
            <span class="element-invisible">Skip back</span> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M14.55,3.09a14.47,14.47,0,0,0-8.89,3L7.07.23,6.09,0l-2,8.42,8.42,2,.23-1L5.36,7.7A13.54,13.54,0,1,1,1,17.64H0A14.55,14.55,0,1,0,14.55,3.09Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.9,23.52a2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84,2.48,2.48,0,0,0-2.36-1.34,2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94A2.42,2.42,0,0,0,17.9,23.52Zm-1.3-6.79A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35,5.25,5.25,0,0,1-.49,2.71,1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06A6,6,0,0,1,16.61,16.72Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control play-audio playDisabled" data-audio-src="/fa_prototype/assets/audio/broadway.mp3" data-audio-progress="progressbar-1">
            <span class="element-invisible">Play</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control pause-audio playDisabled">
            <span class="element-invisible">Pause</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control skip-fwd playDisabled">
            <span class="element-invisible">Skip Forward</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M28.1,17.64A13.57,13.57,0,1,1,23.74,7.7L16.36,9.47l.23,1,8.42-2L23,0,22,.23l1.41,5.9A14.54,14.54,0,1,0,29.1,17.64Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.91,14.9a2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94,2.42,2.42,0,0,0,2.25,1.31,2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84A2.48,2.48,0,0,0,17.91,14.9Zm1.29,6.93a1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06,6,6,0,0,1,.43-2.58A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35A5.25,5.25,0,0,1,19.2,21.83Z"/></svg>
          </a>
        </div>
        <div class="player-status">
          <div class="progressbar" id="progressbar-1">
            <div class="playback"></div>
            <div class="progress"></div>
          </div>
          <span class="current-time">0:00</span>
          <span class="total-duration">33:37</span><!-- NOTE FOR BED: this audio duration should be filled out in a way more efficiently than reading the MP3 via JS, please contact me if there's questions -->
        </div>
      </div>
    </li>
    
    
    
    
    <li class="featured-audio-item inactive">
      <div class="featured-audio-element">
        <img class="featured-audio-img b-lazy" src="/fa_prototype/assets/images/audio-thumb.png" alt="" >
        <div class="featured-audio-expand">
          <span class="featured-audio-expand-play">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </span>
          <span class="featured-audio-expand-pause">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </span>
        </div>
        <time class="featured-audio-date">July 16th, 2017</time>
        <h3 class="featured-audio-item-title">
          
            Russia's Afghanistan Strategy
          
        </h3>
        <h4 class="featured-audio-author">James Crabtree</h4>
        <hr class="clearfix">
        <div class="audio-controls">
          <a href="javascript:void(0)" class="audio-control skip-back ">
            <span class="element-invisible">Skip back</span> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M14.55,3.09a14.47,14.47,0,0,0-8.89,3L7.07.23,6.09,0l-2,8.42,8.42,2,.23-1L5.36,7.7A13.54,13.54,0,1,1,1,17.64H0A14.55,14.55,0,1,0,14.55,3.09Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.9,23.52a2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84,2.48,2.48,0,0,0-2.36-1.34,2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94A2.42,2.42,0,0,0,17.9,23.52Zm-1.3-6.79A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35,5.25,5.25,0,0,1-.49,2.71,1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06A6,6,0,0,1,16.61,16.72Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control play-audio " data-audio-src="/fa_prototype/assets/audio/broadway.mp3" data-audio-progress="progressbar-2">
            <span class="element-invisible">Play</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control pause-audio ">
            <span class="element-invisible">Pause</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control skip-fwd ">
            <span class="element-invisible">Skip Forward</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M28.1,17.64A13.57,13.57,0,1,1,23.74,7.7L16.36,9.47l.23,1,8.42-2L23,0,22,.23l1.41,5.9A14.54,14.54,0,1,0,29.1,17.64Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.91,14.9a2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94,2.42,2.42,0,0,0,2.25,1.31,2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84A2.48,2.48,0,0,0,17.91,14.9Zm1.29,6.93a1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06,6,6,0,0,1,.43-2.58A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35A5.25,5.25,0,0,1,19.2,21.83Z"/></svg>
          </a>
        </div>
        <div class="player-status">
          <div class="progressbar" id="progressbar-2">
            <div class="playback"></div>
            <div class="progress"></div>
          </div>
          <span class="current-time">0:00</span>
          <span class="total-duration">33:37</span><!-- NOTE FOR BED: this audio duration should be filled out in a way more efficiently than reading the MP3 via JS, please contact me if there's questions -->
        </div>
      </div>
    </li>
    
    
    
    
    <li class="featured-audio-item inactive">
      <div class="featured-audio-element">
        <img class="featured-audio-img b-lazy" src="/fa_prototype/assets/images/audio-thumb.png" alt="" >
        <div class="featured-audio-expand">
          <span class="featured-audio-expand-play">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </span>
          <span class="featured-audio-expand-pause">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </span>
        </div>
        <time class="featured-audio-date">July 16th, 2017</time>
        <h3 class="featured-audio-item-title">
          
            Theresa May's Brexit Dilemma
          
        </h3>
        <h4 class="featured-audio-author">James Crabtree</h4>
        <hr class="clearfix">
        <div class="audio-controls">
          <a href="javascript:void(0)" class="audio-control skip-back ">
            <span class="element-invisible">Skip back</span> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M14.55,3.09a14.47,14.47,0,0,0-8.89,3L7.07.23,6.09,0l-2,8.42,8.42,2,.23-1L5.36,7.7A13.54,13.54,0,1,1,1,17.64H0A14.55,14.55,0,1,0,14.55,3.09Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.9,23.52a2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84,2.48,2.48,0,0,0-2.36-1.34,2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94A2.42,2.42,0,0,0,17.9,23.52Zm-1.3-6.79A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35,5.25,5.25,0,0,1-.49,2.71,1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06A6,6,0,0,1,16.61,16.72Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control play-audio " data-audio-src="/fa_prototype/assets/audio/broadway.mp3" data-audio-progress="progressbar-3">
            <span class="element-invisible">Play</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control pause-audio ">
            <span class="element-invisible">Pause</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control skip-fwd ">
            <span class="element-invisible">Skip Forward</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M28.1,17.64A13.57,13.57,0,1,1,23.74,7.7L16.36,9.47l.23,1,8.42-2L23,0,22,.23l1.41,5.9A14.54,14.54,0,1,0,29.1,17.64Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.91,14.9a2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94,2.42,2.42,0,0,0,2.25,1.31,2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84A2.48,2.48,0,0,0,17.91,14.9Zm1.29,6.93a1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06,6,6,0,0,1,.43-2.58A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35A5.25,5.25,0,0,1,19.2,21.83Z"/></svg>
          </a>
        </div>
        <div class="player-status">
          <div class="progressbar" id="progressbar-3">
            <div class="playback"></div>
            <div class="progress"></div>
          </div>
          <span class="current-time">0:00</span>
          <span class="total-duration">33:37</span><!-- NOTE FOR BED: this audio duration should be filled out in a way more efficiently than reading the MP3 via JS, please contact me if there's questions -->
        </div>
      </div>
    </li>
    
    
    
    
    <li class="featured-audio-item inactive">
      <div class="featured-audio-element">
        <img class="featured-audio-img b-lazy" src="/fa_prototype/assets/images/audio-thumb.png" alt="" >
        <div class="featured-audio-expand">
          <span class="featured-audio-expand-play">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </span>
          <span class="featured-audio-expand-pause">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </span>
        </div>
        <time class="featured-audio-date">July 16th, 2017</time>
        <h3 class="featured-audio-item-title">
          
            ISIS Could Rise Again
          
        </h3>
        <h4 class="featured-audio-author">James Crabtree</h4>
        <hr class="clearfix">
        <div class="audio-controls">
          <a href="javascript:void(0)" class="audio-control skip-back ">
            <span class="element-invisible">Skip back</span> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M14.55,3.09a14.47,14.47,0,0,0-8.89,3L7.07.23,6.09,0l-2,8.42,8.42,2,.23-1L5.36,7.7A13.54,13.54,0,1,1,1,17.64H0A14.55,14.55,0,1,0,14.55,3.09Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.9,23.52a2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84,2.48,2.48,0,0,0-2.36-1.34,2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94A2.42,2.42,0,0,0,17.9,23.52Zm-1.3-6.79A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35,5.25,5.25,0,0,1-.49,2.71,1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06A6,6,0,0,1,16.61,16.72Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control play-audio " data-audio-src="/fa_prototype/assets/audio/broadway.mp3" data-audio-progress="progressbar-4">
            <span class="element-invisible">Play</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control pause-audio ">
            <span class="element-invisible">Pause</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control skip-fwd ">
            <span class="element-invisible">Skip Forward</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M28.1,17.64A13.57,13.57,0,1,1,23.74,7.7L16.36,9.47l.23,1,8.42-2L23,0,22,.23l1.41,5.9A14.54,14.54,0,1,0,29.1,17.64Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.91,14.9a2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94,2.42,2.42,0,0,0,2.25,1.31,2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84A2.48,2.48,0,0,0,17.91,14.9Zm1.29,6.93a1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06,6,6,0,0,1,.43-2.58A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35A5.25,5.25,0,0,1,19.2,21.83Z"/></svg>
          </a>
        </div>
        <div class="player-status">
          <div class="progressbar" id="progressbar-4">
            <div class="playback"></div>
            <div class="progress"></div>
          </div>
          <span class="current-time">0:00</span>
          <span class="total-duration">33:37</span><!-- NOTE FOR BED: this audio duration should be filled out in a way more efficiently than reading the MP3 via JS, please contact me if there's questions -->
        </div>
      </div>
    </li>
    
    
    
    
    <li class="featured-audio-item inactive">
      <div class="featured-audio-element">
        <img class="featured-audio-img b-lazy" src="/fa_prototype/assets/images/audio-thumb.png" alt="" >
        <div class="featured-audio-expand">
          <span class="featured-audio-expand-play">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </span>
          <span class="featured-audio-expand-pause">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </span>
        </div>
        <time class="featured-audio-date">July 16th, 2017</time>
        <h3 class="featured-audio-item-title">
          
            Putin's Plan for Syria
          
        </h3>
        <h4 class="featured-audio-author">James Crabtree</h4>
        <hr class="clearfix">
        <div class="audio-controls">
          <a href="javascript:void(0)" class="audio-control skip-back ">
            <span class="element-invisible">Skip back</span> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M14.55,3.09a14.47,14.47,0,0,0-8.89,3L7.07.23,6.09,0l-2,8.42,8.42,2,.23-1L5.36,7.7A13.54,13.54,0,1,1,1,17.64H0A14.55,14.55,0,1,0,14.55,3.09Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.9,23.52a2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84,2.48,2.48,0,0,0-2.36-1.34,2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94A2.42,2.42,0,0,0,17.9,23.52Zm-1.3-6.79A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35,5.25,5.25,0,0,1-.49,2.71,1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06A6,6,0,0,1,16.61,16.72Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control play-audio " data-audio-src="/fa_prototype/assets/audio/broadway.mp3" data-audio-progress="progressbar-5">
            <span class="element-invisible">Play</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM15.78,31.39V10.52L29.22,21Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control pause-audio ">
            <span class="element-invisible">Pause</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><path d="M20.5,0A20.5,20.5,0,1,0,41,20.5,20.5,20.5,0,0,0,20.5,0ZM18,27.5H14v-15h4Zm8,0H22v-15h4Z"/></svg>
          </a>
          <a href="javascript:void(0)" class="audio-control skip-fwd ">
            <span class="element-invisible">Skip Forward</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.1 32.19"><path class="cls-1" d="M28.1,17.64A13.57,13.57,0,1,1,23.74,7.7L16.36,9.47l.23,1,8.42-2L23,0,22,.23l1.41,5.9A14.54,14.54,0,1,0,29.1,17.64Z"/><path class="cls-1" d="M11.11,22.56a1.6,1.6,0,0,1-1.48-.66,2.73,2.73,0,0,1-.3-1.18H8.22a3,3,0,0,0,.67,2,2.64,2.64,0,0,0,2.16.82,3.12,3.12,0,0,0,2.24-.76,2.59,2.59,0,0,0,.79-2,2.12,2.12,0,0,0-.37-1.27,1.82,1.82,0,0,0-1-.7,1.75,1.75,0,0,0,.67-.47,1.85,1.85,0,0,0,.42-1.25,2,2,0,0,0-.7-1.66,3.07,3.07,0,0,0-2-.57,2.36,2.36,0,0,0-2.27,1.17,3.16,3.16,0,0,0-.37,1.59h1a2.44,2.44,0,0,1,.25-1.1,1.54,1.54,0,0,1,1.46-.7,1.66,1.66,0,0,1,1,.34,1.14,1.14,0,0,1,.45,1A1.19,1.19,0,0,1,12,18.33a2.2,2.2,0,0,1-1,.19h-.24l-.28,0v.93h.43a2.68,2.68,0,0,1,1.47.35A1.34,1.34,0,0,1,13,21a1.46,1.46,0,0,1-.5,1.15A1.94,1.94,0,0,1,11.11,22.56Z"/><path class="cls-1" d="M17.91,14.9a2.53,2.53,0,0,0-2.5,1.91A7.27,7.27,0,0,0,15,19.26a6,6,0,0,0,.62,2.94,2.42,2.42,0,0,0,2.25,1.31,2.5,2.5,0,0,0,2.41-1.61,6.84,6.84,0,0,0,.51-2.83,6,6,0,0,0-.56-2.84A2.48,2.48,0,0,0,17.91,14.9Zm1.29,6.93a1.5,1.5,0,0,1-2.75-.46,6.34,6.34,0,0,1-.28-2.06,6,6,0,0,1,.43-2.58A1.43,1.43,0,0,1,18,15.85a1.34,1.34,0,0,1,1.37.92,6.66,6.66,0,0,1,.35,2.35A5.25,5.25,0,0,1,19.2,21.83Z"/></svg>
          </a>
        </div>
        <div class="player-status">
          <div class="progressbar" id="progressbar-5">
            <div class="playback"></div>
            <div class="progress"></div>
          </div>
          <span class="current-time">0:00</span>
          <span class="total-duration">33:37</span><!-- NOTE FOR BED: this audio duration should be filled out in a way more efficiently than reading the MP3 via JS, please contact me if there's questions -->
        </div>
      </div>
    </li>
    
  </ul>
  
  <audio id="home-featured-audio-player"></audio>
  <div class="featured-audio-browse-all">
    <p class="featured-audio-browse-all-text"><a href="#" class="featured-audio-browse-all-link">Browse all articles with audio</a></p>
  </div>
</section>