Create the audio track component

[dhruvkb]

Fixes

Fixes #104 by @zackkrida

Description

This PR creates the audio track component and any other components needed by it.

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[dhruvkb]

[zackkrida]

So happy to see the resampling work, amazing

[zackkrida]

Added a quick event handler to make the progress user-settable. you don't have to go with this implementation of course :)

#128

we'd do the same approach with a hover event for the grey preview state done.

[dhruvkb]

I just finished that same stuff locally @zackkrida. Now I'm

• sad that part of both our efforts will be wasted
• happy that the final thing will be better than either of our implementations

[dhruvkb]

@zackkrida I made some tweaks and merged your PR, thanks for chipping in! I've also done most of the seekbar implementation in the actual AudioTrack component but I'm not pushing it until I've done my QA.

[zackkrida]

What's important is that we had fun! Haha, it is the weekend after all. Excited to look at the approach you went with.

[zackkrida]

By the way @dhruvkb, this is looking amazing, and don't worry, I won't interrupt your work with contributions of my own 😆.

I'm realizing we need @panchovm to design a state for when you go seek backwards over the yellow bar. maybe the bars could be white or something? not sure. If you need me to describe the state we need better @panchovm I can elaborate next week.

[dhruvkb]

Hahaha, I'm heading off to sleep now, feel free to add any changes you find!

[dhruvkb]

I tweaked the appearance a little bit to change how the seek process looks when seeking behind progress in d6113cb.

[fcoveram]

All this looks awesome. Thank you both. Regarding going backward, I was thinking of keeping the same black bars interactions. The yellow background fills the area slowly as the seconds pass, while the black bars show what time the user wants to start playing, no matter if the yellow area is ahead or behind.

The wave area (gray bars) works independently of the playing area (yellow background) when the user hovers the whole audio section.

I hope I explained myself correctly.

[dhruvkb]

@panchovm I think I got what you mean. That's great because d6113cb implements exactly the same idea that you mentioned 🎉!

[zackkrida]

@panchovm for reference, here is the current implementation:

CleanShot.2021-08-17.at.09.46.50.mp4

[zackkrida]

@dhruvkb I cleaned up the git history here, you might want to git branch -D track and git checkout track locally.

[zackkrida]

In AudioTrack.vue we might want to have something like this, as a fallback for when peaks data doesn't exist:

     <Waveform
+       v-if="audio.peaks"
        class="h-30 w-full"
        :is-ready="isReady"
        :current-time="currentTime"
        :duration="duration"
        :peaks="audio.peaks"
        @seeked="setPosition"
      />

Otherwise this is looking really good. Do we want to include all a11y work here or in a subsequent pr?

[dhruvkb]

Improving a11y in a subsequent PR would be better, as getting the Storybook merged allows other components to be developed on the side.

[dhruvkb]

@zackkrida your suggestion about removing the waveform in the absence of peaks will need a design update because the waveform is both the progress and the seek bar. Without it, we need an alternative way to serve these functions.

CC: @panchovm

[zackkrida]

@zackkrida your suggestion about removing the waveform in the absence of peaks will need a design update because the waveform is both the progress and the seek bar. Without it, we need an alternative way to serve these functions.

CC: @panchovm

I'm also fine with some kind of way to guarantee we have the waveform elsewhere in the stack. If we can assume we have the audio, we can assume we have the waveform

[krysal]

It's so exciting to see the track component playing the audio! It looks simple but at the same time, it has so many carefully thought out and cared details. Excellent work, thanks!