EMULSIF-231: Convert Audio player to support SDC

[mariannuar]

Summary

This PR updates the yml file and stories.js file of the Audio player component to meet the schema the Single Directory Component uses it

How to review this pull request

• Run npm run storybook
• Go to http://localhost:6006/?path=/story/components-media-audio-player--audio-player
• Confirm the audio player is still looking as expected (Note: Found out the audio player hasn't been working, something related to the webpack configuration. I tried to fix it, but I couldn't so it would be good to have a ticket for this)

[netlify]

✅ Deploy Preview for emulsify-ui-kit ready!

Name	Link
🔨 Latest commit	3c3b41e
🔍 Latest deploy log	https://app.netlify.com/sites/emulsify-ui-kit/deploys/669848c31846f6000768f448
😎 Deploy Preview	https://deploy-preview-129--emulsify-ui-kit.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.

[joetower]

@mariannuar This looks good, but should the audio file actually play?

The path appears to be correct (in the yml file), but the audio file doesn't play within Storybook.

[mariannuar]

@joetower Thanks for asking. Yes, that's an issue related to the way webpack loads it. It's been like that since I'm not sure. I took a look at what's in the main branch and it wasn't working. I created a ticket to fix this in another branch https://app.clickup.com/t/36718269/EMULSIF-252 so the fix can go to the main branch instead of the release branch for everything related to SDC. But if you think the fix should be included in this ticket, that's totally fine for me

[joetower]

@mariannuar Oh I think that's totally fine to merge this ticket in, then. 👍