Press a button to start and stop recording a message. Send it to a chatroom or click cancel to remove it from the form. All done with Active Storage and Direct Uploads.
If you want to follow along to get to this point in the tutorial series, here's the source code: https://github.com/Deanout/turbo_chatroom/tree/main/episode_24
References:
Audio record With JavaScript: https://github.com/mdn/web-dictaphone
Rails Active Storage Direct Upload With JavaScript: https://stackoverflow.com/questions/50872912/integration-rails-active-storage-with-js-uploaders
https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads
Join this channel to help support these videos:
https://www.youtube.com/channel/UCRQv-3VvPT9mArF5RfrlpKQ/join
Follow me on social media:
https://linktr.ee/deanin
Join this channel to get access to perks:
https://www.youtube.com/channel/UCRQv-3VvPT9mArF5RfrlpKQ/join
If you liked this video, please consider subscribing: https://t.co/RZ4EwP0F2a
Timestamps
0:00 Record Audio And Send With Rails 7 Turbo Demo
2:45 Cleanup Homepage Message Previews With HTML Safe
3:40 Implementation Details
4:32 Create A Voice Record Button In Rails 7
6:24 Creating The Audio Media Recorder To Stop And Start Recording
16:32 Attaching Recorded Audio File To Active Storage Form
22:00 Validating Audio File Type For Web Recording In Rails 7
24:30 Styling The Record Button So It Looks Better
#Deanin #Software #Programming