Overview
See more examples of what layouts and options are available for the Audio Player see the demo page.
Notes:
- Image
- Use medium-sized 16:9 image (e.g. 450x253)
Single with image, info, and multiple languages
Details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus nisl id dictum dictum. Aenean ac turpis pharetra, hendrerit odio quis, ornare magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dr. Christopher Morgan, MD
Author & Producer
Then bring them into your world. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. A thin paint will stick to a thick paint.
<!-- Unique ID required for each `c-audio-player-card` -->
<!--
// Available modifier classes to `c-audio-player-card`:
// `has-image` if card has an image
// `has-info` if card has description or author info
// `is-series` if card is a series of audio clips
-->
<div class="c-audio-player-card u-m-b-sm has-image has-info" id="audio-player-card-123"
data-en-transcript-text="Transcript"
data-en-download-text="Download"
data-es-transcript-text="Transcripción"
data-es-download-text="Descargar"
data-zh-transcript-text="成绩单"
data-zh-download-text="下载mp3 a"
>
<!-- Only render `c-audio-player-card__mobile-image` if image (16:9 required, 600x338 max.) is provided -->
<div class="c-card__img c-audio-player-card__mobile-image">
<div class="o-ar o-ar--16:9">
<img class="o-ar__item" src="/images/placeholder/x-ray-16-9.jpg" alt="">
</div>
</div>
<div class="c-audio-player-card__grid u-d-flex">
<div class="c-audio-player-card__content">
<div class="c-audio-player-card__container u-p-horz u-p-t-md">
<!-- Optional eyebrow -->
<div class="c-audio-player-card__eyebrow u-m-b-xs">
<div class="nyp-type-eyebrow--small">
<span class="o-svg-icon o-svg-icon--xl u-c-red">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M336 192h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16zM176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zM128 96c0-26.47 21.53-48 48-48s48 21.53 48 48v160c0 26.47-21.53 48-48 48s-48-21.53-48-48V96z" fill="currentColor"/>
</svg>
</span>
Audio
</div>
</div>
<div class="c-audio-player"
data-en-title="Mindful Breathing Meditation"
data-en-audio-path="/downloads/IH-Audio-Mindful-Breathing-Meditation.mp3"
data-en-transcript-path="/downloads/audio-transcript-en.pdf"
data-es-title="Meditación con respiración consciente"
data-es-audio-path="/downloads/IH-Audio-Mindful-Breathing-Meditation_Spanish.mp3"
data-es-transcript-path="/downloads/audio-transcript-es.pdf"
data-zh-title="专注呼吸冥想"
data-zh-audio-path="/downloads/IH-Audio-Mindful-Breathing-Meditation_Mandarin.mp3"
data-zh-transcript-path="/downloads/audio-transcript-zh.pdf"
>
<div class="c-audio-player__container">
<figcaption class="c-audio-player__title"></figcaption>
<audio controls src="" class="">
Your browser does not support the <code>audio</code> element.
</audio>
</div>
<div class="c-audio-player__details">
<!-- language selectors -->
<div class="c-audio-player__details--languages u-p-r-xs u-m-b">
<span class="language-link-en js-hidden">
<a role="button" href='#' class="subtle-link subtle-link--alt" data-lang-select="en">English</a>
</span>
<span class="language-link-es js-hidden">
<a role="button" href='#' class="subtle-link subtle-link--alt" data-lang-select="es">Español</a>
</span>
<span class="language-link-zh js-hidden">
<a role="button" href='#' class="subtle-link subtle-link--alt" data-lang-select="zh">中文</a>
</span>
</div>
<div class="c-audio-player__details--files u-m-b">
<div>
<!-- transcript link -->
<span class="c-audio-player__transcript-link js-hidden">
<a href="" class="c-inline-icon subtle-link subtle-link--alt">
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
</svg>
</span>
<span class="c-inline-icon__link subtle-link subtle-link--alt">Transcript</span>
</a>
<span class="language-seperator u-p-horz-xs">|</span>
</span>
<!-- download link -->
<a href="" class="c-audio-player__download-link c-inline-icon subtle-link subtle-link--alt" download>
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M468.8 284.4h-81.7l40.9-40.9c26.7-26.7 7.8-72.6-30.1-72.6h-56.8V71.6c0-23.5-19.1-42.6-42.6-42.6h-85.1C190 29 171 48.1 171 71.6v99.3h-56.8c-37.8 0-56.9 45.8-30.1 72.6l40.9 40.9H43.2C19.7 284.4.6 303.5.6 327v113.5c0 23.5 19.1 42.6 42.6 42.6h425.6c23.5 0 42.6-19.1 42.6-42.6V326.9c0-23.5-19.1-42.5-42.6-42.5zm-354.7-71h99.3V71.6h85.1v141.9h99.3L256 355.3 114.1 213.4zm354.7 227H43.2V326.9h124.2l58.4 58.4c16.7 16.7 43.5 16.6 60.2 0l58.4-58.4h124.3v113.5zm-78-56.7c0-11.8 9.5-21.3 21.3-21.3s21.3 9.5 21.3 21.3-9.5 21.3-21.3 21.3-21.3-9.5-21.3-21.3z" fill="currentColor"/>
</svg>
</span>
<span class="c-inline-icon__link subtle-link subtle-link--alt">Download</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Only render `c-audio-player-card__card-image` if image (16:9, 600x338 max.) is provided -->
<div class="c-audio-player-card__card-image">
<!-- This will crop any image to 1:1 -->
<div class="o-crop o-crop--1:1">
<!-- Crop defaults to `o-crop__content--center` but the author should be able to choose from all the crop focal area modifiers -->
<!-- https://nyp-component-library-docs.mirum.agency/front-end-core/objects/crop/#crop-setting-focal-areas -->
<img class="o-crop__content o-crop__content--center" src="/images/placeholder/x-ray-16-9.jpg" alt="" role="presentation">
</div>
</div>
</div>
<!-- Only render `c-audio-player-card__info` if there is description or author-card content -->
<div class="c-audio-player-card__info c-collapse">
<h3 class="nyp-type-h5 u-m-b-0">
<a href="#collapse-bar-789" class="c-collapse__button" aria-controls="collapse-bar" aria-expanded="false">
Details
</a>
</h3>
<!-- Unique ID required for collapse -->
<div class="c-collapse__collapse" id="collapse-bar-789">
<!-- Only render `c-audio-player-card__description` if there is description content -->
<div class="c-audio-player-card__description u-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus nisl id dictum dictum. Aenean ac turpis pharetra, hendrerit odio quis, ornare magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Only render `c-audio-player-card__author-card` if there is author content -->
<div class="c-audio-player-card__author-card o-media u-bg-gray-light u-p">
<img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="" style="width: 64px; height: 64px;">
<div class="o-media__body">
<div>
<!-- Optional link for author's name -->
<a href="#" class="subtle-link subtle-link--alt"><span class="nyp-type-body-small u-text-bold">Dr. Christopher Morgan, MD</span></a>
<!-- Optional title -->
<span class="nyp-type-body-small u-text-italic u-m-l-xs">Author & Producer</span>
</div>
<div class="nyp-type-body-small">Then bring them into your world. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. A thin paint will stick to a thick paint.</div>
</div>
</div>
</div>
</div>
</div>
Series with image, info, and multiple languages
Details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus nisl id dictum dictum. Aenean ac turpis pharetra, hendrerit odio quis, ornare magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dr. Christopher Morgan, MD
Author & Producer
Then bring them into your world. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. A thin paint will stick to a thick paint.
<!-- Unique ID required for each `c-audio-player-card` -->
<!--
// Available modifier classes to `c-audio-player-card`:
// `has-image` if card has an image
// `has-info` if card has description or author info
// `is-series` if card is a series of audio clips
-->
<div class="c-audio-player-card u-m-b-sm has-image has-info is-series" id="audio-player-card-002"
data-en-transcript-text="Transcript"
data-en-download-text="Download"
data-es-transcript-text="Transcripción"
data-es-download-text="Descargar"
data-zh-transcript-text="成绩单"
data-zh-download-text="下载mp3 a"
>
<!-- Only render `c-audio-player-card__mobile-image` if image is provided -->
<div class="c-card__img c-audio-player-card__mobile-image">
<div class="o-ar o-ar--16:9">
<img class="o-ar__item" src="/images/placeholder/audio-player-card-image-1-16-9.png" alt="">
</div>
</div>
<div class="c-audio-player-card__grid u-d-flex">
<div class="c-audio-player-card__content">
<div class="c-audio-player-card__container u-p-horz u-p-t-md">
<!-- Optional eyebrow -->
<div class="c-audio-player-card__eyebrow u-m-b-xs">
<div class="nyp-type-eyebrow--small">
<span class="o-svg-icon o-svg-icon--xl u-c-red">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M336 192h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16zM176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zM128 96c0-26.47 21.53-48 48-48s48 21.53 48 48v160c0 26.47-21.53 48-48 48s-48-21.53-48-48V96z" fill="currentColor"/>
</svg>
</span>
Audio
</div>
</div>
<!-- Use `c-audio-player-card__series-title` if this a series of audio files -->
<h3 class="c-audio-player-card__series-title nyp-type-h4 u-m-b">Meditation for Beginners Series</h3>
<div class="c-audio-player"
data-en-title="1. For Stress Relief"
data-en-audio-path="https://www.nyp.org/documents/integrative-health/IH-Audio-Meditation-for-Stress-Relief.mp3"
data-en-transcript-path="/downloads/audio-transcript-en.pdf"
data-es-title="1. Para aliviar el estrés"
data-es-audio-path="https://www.nyp.org/documents/integrative-health/IH-Audio-Meditation-for-Stress-Relief.mp3"
data-es-transcript-path="/downloads/audio-transcript-es.pdf"
>
<div class="c-audio-player__container">
<figcaption class="c-audio-player__title">1. For Stress Relief</figcaption>
<audio controls src="https://www.nyp.org/documents/integrative-health/IH-Audio-Breathwork-for-Pain-Relief.mp3" class="">
Your browser does not support the <code>audio</code> element.
</audio>
</div>
<div class="c-audio-player__details">
<!-- language selectors -->
<div class="c-audio-player__details--languages u-p-r-xs u-m-b">
<a href="#" class="subtle-link subtle-link--alt active js-hidden" data-lang-select="en">English</a>
<span class="language-link-es js-hidden">
<span class="language-seperator u-p-horz-xs">•</span>
<a href="#" class="subtle-link subtle-link--alt" data-lang-select="es">Español</a>
</span>
<span class="language-link-zh js-hidden">
<span class="language-seperator u-p-horz-xs">•</span>
<a href="#" class="subtle-link subtle-link--alt" data-lang-select="zh">中文</a>
</span>
</div>
<div class="c-audio-player__details--files u-m-b">
<div>
<!-- transcript link -->
<span class="c-audio-player__transcript-link js-hidden">
<a href="/downloads/audio-transcript-en.pdf" class="c-inline-icon subtle-link subtle-link--alt">
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
</svg>
</span>
<span class="c-inline-icon__link subtle-link subtle-link--alt">Transcript</span>
</a>
<span class="language-seperator u-p-horz-xs">|</span>
</span>
<!-- download link -->
<a href="https://www.nyp.org/documents/integrative-health/IH-Audio-Breathwork-for-Pain-Relief.mp3" class="c-audio-player__download-link c-inline-icon subtle-link subtle-link--alt">
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M468.8 284.4h-81.7l40.9-40.9c26.7-26.7 7.8-72.6-30.1-72.6h-56.8V71.6c0-23.5-19.1-42.6-42.6-42.6h-85.1C190 29 171 48.1 171 71.6v99.3h-56.8c-37.8 0-56.9 45.8-30.1 72.6l40.9 40.9H43.2C19.7 284.4.6 303.5.6 327v113.5c0 23.5 19.1 42.6 42.6 42.6h425.6c23.5 0 42.6-19.1 42.6-42.6V326.9c0-23.5-19.1-42.5-42.6-42.5zm-354.7-71h99.3V71.6h85.1v141.9h99.3L256 355.3 114.1 213.4zm354.7 227H43.2V326.9h124.2l58.4 58.4c16.7 16.7 43.5 16.6 60.2 0l58.4-58.4h124.3v113.5zm-78-56.7c0-11.8 9.5-21.3 21.3-21.3s21.3 9.5 21.3 21.3-9.5 21.3-21.3 21.3-21.3-9.5-21.3-21.3z" fill="currentColor"/>
</svg>
</span>
<span class="c-inline-icon__link subtle-link subtle-link--alt">Download</span>
</a>
</div>
</div>
</div>
</div>
<div class="c-audio-player"
data-en-title="2. For Digestion"
data-en-audio-path="http://www.nyp.org/documents/integrative-health/IH-Audio-Meditation-for-Digestion.mp3"
data-en-transcript-path="/downloads/audio-transcript-en.pdf"
>
<div class="c-audio-player__container">
<figcaption class="c-audio-player__title">2. For Digestion</figcaption>
<audio controls src="http://www.nyp.org/documents/integrative-health/IH-Audio-Meditation-for-Digestion.mp3" class="">
Your browser does not support the <code>audio</code> element.
</audio>
</div>
<div class="c-audio-player__details">
<!-- language selectors -->
<div class="c-audio-player__details--languages u-p-r-xs u-m-b">
<a href="#" class="subtle-link subtle-link--alt active js-hidden" data-lang-select="en">English</a>
<span class="language-link-es js-hidden">
<span class="language-seperator u-p-horz-xs">•</span>
<a href="#" class="subtle-link subtle-link--alt" data-lang-select="es">Español</a>
</span>
<span class="language-link-zh js-hidden">
<span class="language-seperator u-p-horz-xs">•</span>
<a href="#" class="subtle-link subtle-link--alt" data-lang-select="zh">中文</a>
</span>
</div>
<div class="c-audio-player__details--files u-m-b">
<div>
<!-- transcript link -->
<span class="c-audio-player__transcript-link js-hidden">
<a href="/downloads/audio-transcript-en.pdf" class="c-inline-icon subtle-link subtle-link--alt">
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M352 248v28c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H112c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h204.1C328.8 0 341 5.1 350 14.1L433.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L320 51.9zM400 464V176H296c-13.3 0-24-10.7-24-24V48H112v416h288z" fill="currentColor"/>
</svg>
</span>
<span class="c-inline-icon__link subtle-link subtle-link--alt">Transcript</span>
</a>
<span class="language-seperator u-p-horz-xs">|</span>
</span>
<!-- download link -->
<a href="https://www.nyp.org/documents/integrative-health/IH-Audio-Breathwork-for-Pain-Relief.mp3" class="c-audio-player__download-link c-inline-icon subtle-link subtle-link--alt">
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M468.8 284.4h-81.7l40.9-40.9c26.7-26.7 7.8-72.6-30.1-72.6h-56.8V71.6c0-23.5-19.1-42.6-42.6-42.6h-85.1C190 29 171 48.1 171 71.6v99.3h-56.8c-37.8 0-56.9 45.8-30.1 72.6l40.9 40.9H43.2C19.7 284.4.6 303.5.6 327v113.5c0 23.5 19.1 42.6 42.6 42.6h425.6c23.5 0 42.6-19.1 42.6-42.6V326.9c0-23.5-19.1-42.5-42.6-42.5zm-354.7-71h99.3V71.6h85.1v141.9h99.3L256 355.3 114.1 213.4zm354.7 227H43.2V326.9h124.2l58.4 58.4c16.7 16.7 43.5 16.6 60.2 0l58.4-58.4h124.3v113.5zm-78-56.7c0-11.8 9.5-21.3 21.3-21.3s21.3 9.5 21.3 21.3-9.5 21.3-21.3 21.3-21.3-9.5-21.3-21.3z" fill="currentColor"/>
</svg>
</span>
<span class="c-inline-icon__link subtle-link subtle-link--alt">Download</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Only render `c-audio-player-card__card-image` if image is provided -->
<div class="c-audio-player-card__card-image">
<div class="o-crop o-crop--1:1">
<div class="o-crop__wrapper">
<img class="o-crop__content o-crop__content--center" src="/images/placeholder/audio-player-card-image-1-16-9.png" alt="" role="presentation">
</div>
</div>
</div>
</div>
<div class="c-audio-player-card__info c-collapse">
<h3 class="nyp-type-h5 u-m-b-0">
<a href="#collapse-bar-123" class="c-collapse__button" aria-controls="collapse-bar" aria-expanded="false">
Details
</a>
</h3>
<!-- Unique ID required -->
<div class="c-collapse__collapse" id="collapse-bar-123">
<!-- Only render `c-audio-player-card__description` if there is description content -->
<div class="c-audio-player-card__description u-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus nisl id dictum dictum. Aenean ac turpis pharetra, hendrerit odio quis, ornare magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Only render `c-audio-player-card__author-card` if there is author content -->
<div class="c-audio-player-card__author-card o-media o-cover-link u-bg-gray-light u-p">
<img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="" style="width: 64px; height: 64px;">
<div class="o-media__body">
<div>
<a class="subtle-link subtle-link--alt o-cover-link__overlay"><span class="nyp-type-body-small u-text-bold">Dr. Christopher Morgan, MD</span></a>
<span class="nyp-type-body-small u-text-italic u-m-l-xs">Author & Producer</span>
</div>
<div class="nyp-type-body-small">Then bring them into your world. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. A thin paint will stick to a thick paint.</div>
</div>
</div>
</div>
</div>
</div>