Audio

This pattern is for embedding a SoundCloud audio file with an optional text label. The alternate featured media pattern may be used for audio embeds on a full width page layout.

Rules for using audio

  • A title attribute for the <iframe> must be provided to make the audio accessible to users of screen reader software. Including the text '(Audio)' at the end of the title helps to identify the type of content when read out.
  • For pre-recorded audio a transcript must be provided to make the content of the audio file accessible.
  • A label <figcaption> may be included to add context to the audio file.

More information on transcripts is described within caption standards.

Options available

SoundCloud audio

This example contains no dialogue so a transcript is not required.

Example
Code 
<!-- Begin pattern: audio //-->
<figure>    
    <div class='embed-responsive-item'><iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' title='Sperm echolocation sonar (Audio)' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/793679809&color=%230071b3&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false'></iframe></div>
</figure>
<!-- End pattern: audio //-->

SoundCloud audio with transcript

This example includes a transcript to provide accessible alternative content.

Example
Code 
<!-- Begin pattern: audio //-->
<figure>    
    <div class='embed-responsive-item'><iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' title='Don Paterson Sonnets (Audio)' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/129623338&color=%230071b3&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false'></iframe></div>
    <!-- Begin pattern: accordion //-->
    <div class="accordion-item">
        <div class="accordion-item__toggle">
            <div class="accordion-item__toggle-title">
                <button class="accordion-item__toggle-button" aria-expanded="false">Audio transcript</button>
            </div>
        </div>
        <div class="accordion-item__content" aria-hidden="true"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p>
        </div>
       </div>
    <!-- End pattern: accordion //-->
</figure>
<!-- End pattern: audio //-->

SoundCloud audio with transcript and label

This example shows a sound clip with text label and transcript.

Example
Poet Don Paterson talks about his book Reading Shakespeare's Sonnets and reads from the sonnets.
Code 
<!-- Begin pattern: audio //-->
<figure>    
    <div class='embed-responsive-item'><iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' title='Don Paterson Sonnets (Audio)' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/129623338&color=%230071b3&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false'></iframe></div>
    <figcaption>Poet Don Paterson talks about his book Reading Shakespeare's Sonnets and reads from the sonnets.</figcaption>
    <!-- Begin pattern: accordion //-->
    <div class="accordion-item">
        <div class="accordion-item__toggle">
            <div class="accordion-item__toggle-title">
                <button class="accordion-item__toggle-button" aria-expanded="false">Audio transcript</button>
            </div>
        </div>
        <div class="accordion-item__content" aria-hidden="true"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p>
        </div>
       </div>
    <!-- End pattern: accordion //-->
</figure>
<!-- End pattern: audio //-->