Audio Gallery
Wellbeing Audio Gallery
Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.
<div class="c-audio-gallery u-m-b-lg">
<!-- Optional Header -->
<div class="c-audio-gallery__header">
<!-- Optional Title -->
<h2 class="c-audio-gallery__title nyp-type-h2 u-m-b-sm">Wellbeing Audio Gallery</h2>
<!-- Optional Body -->
<p>Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.</p>
</div>
<hr class="c-card-grid__divider u-m-vert">
<div class="o-grid u-f-justify-center">
<!-- On pages with a left-nav use `o-grid__item-12` class instead -->
<div class="o-grid__item-10@lg">
<!-- Unique ID required for each `c-audio-player-card` -->
<div class="c-audio-player-card u-m-b-sm" id="audio-player-card-001"
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"
>
<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="https://www.nyp.org/documents/integrative-health/IH-Audio-Mindful-Breathing-Meditation.mp3"
data-en-transcript-path="/downloads/audio-transcript-en.pdf"
>
<div class="c-audio-player__container">
<figcaption class="c-audio-player__title">Mindful Breathing Meditation</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">
<!-- 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>
<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>
</div>
</div>
<!-- Unique ID required for each `c-audio-player-card` -->
<div class="c-audio-player-card u-m-b-sm" id="audio-player-card-001"
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"
>
<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="https://www.nyp.org/documents/integrative-health/IH-Audio-Mindful-Breathing-Meditation.mp3"
data-en-transcript-path="/downloads/audio-transcript-en.pdf"
>
<div class="c-audio-player__container">
<figcaption class="c-audio-player__title">Mindful Breathing Meditation</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">
<!-- 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>
<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>
</div>
</div>
<p>... etc.</p>
</div>
</div>
</div>