IYY-279: Visitors can listen to Posts - aka Audio player component

[joetower]

IYY-279: Visitors can listen to Posts - aka Audio player component

Description of work

• Adds audio component
• Themes a custom player for audio files
• YaleSites Platform: IYY-279: Visitors can listen to Posts - aka Audio player component yalesites-project#871
• Atomic: IYY-279: Visitors can listen to Posts - aka Audio player component atomic#307

Testing Link(s)

• Navigate to the Audio Embed Component Story

Functional Review Steps

• Navigate to: https://deploy-preview-468--dev-component-library-twig.netlify.app/?path=/story/atoms-audio--audio-embed
• Verify you can play an audio file
• Verify the current time and run time are displayed
• Verify you can control the playback speed
• Verify you can control the volume (set to 50% by default)
• Test in Drupal: IYY-279: Visitors can listen to Posts - aka Audio player component yalesites-project#871

iyy-audio-on-posts.mp4

Design Review

• Verify the designs match the Audio Player Figma Designs
• Note: I added volume control as both a usability and accessibility enhancment

Accessibility Review

• Verify the component meets Accessibility requirements

[netlify]

✅ Deploy Preview for dev-component-library-twig ready!

Name	Link
🔨 Latest commit	308da5d
🔍 Latest deploy log	https://app.netlify.com/sites/dev-component-library-twig/deploys/67bf8d4efbaead0008b157a9
😎 Deploy Preview	https://deploy-preview-468--dev-component-library-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codechefmarc]

This works well. A few notes:

• I can't see the progress line or volume line that shows up in your video. The controls still work though. See screenshot.
• On mobile, volume doesn't work at all. Desktop works fine. I suspect since you have mobile physical volume controls that isn't a problem, but what do you think about hiding it on mobile?

[joetower]

@codechefmarc Oh, I see. I'll test this in Chrome and figure out those bugs.

Also, on mobile, on Android the volume controls work as they should. I will test on an iPhone (assuming you tested on an iPhone?), though. Thank you!

[codechefmarc]

Also, on mobile, on Android the volume controls work as they should. I will test on an iPhone (assuming you tested on an iPhone?), though. Thank you!

Ahh yup, I tested on an iPhone, I should have said. :)

[joetower]

@codechefmarc Thank you! Apparently, Apple don't allow programmatic adjustments to volume. So, it looks like iPhones are limited to using the physical volume buttons.

It does make me wonder if we should hide playback speed and volume on mobile.

[codechefmarc]

The playback speed worked fine for me on iOS, but, the target was a bit small to tap is all.

[joetower]

@codechefmarc Could you please give this another look? On mobile, I made both the track and the thumb/dial thicker and easier to move with your thumb.

On iOS, the volume slider is now hidden.

[dblanken-yale]

Deferring to @miketullo95 for ultimate verification, but I noticed that the icon next to the speed is clickable, but the actual 1.0x is not to change it? Should this whole "box" be clickable to change the speed?

[dblanken-yale]

Also some hover elements don't change mouse icon; should they? Like hovering over the play/pause or the speed so you know you can click it? Also deferring. :)

[dblanken-yale]

Oh, if the audio is finished playing, the pause button stays up, and if you change the location of the audio afterward, it does not continue playing. Should it reset to a play button icon to show it's not playing any more?

[dblanken-yale]

Screen.Recording.2025-03-05.at.11.29.20.AM.mov

Here is a video showing most all of that above. :D