Discover more from sprouts & thoughts 🌱

a digital garden of curated thoughts

Design

How to embed audio file for name pronunciation into portfolio (Webflow edition)

play audio on tap 🎧

yifan

Jul 8, 2023

In case we haven’t met yet: Hi, my name is YiFan ( ˙꒳˙ )ﾉﾞ.

Living in the Western world with an ethnic name comes with its challenges, one of which is that people are often confused or intimidated when attempting to pronounce my name. Usually, I’m happy to teach them in person, but the problem arises when people find me through my portfolio or other digital fronts. Thus, I wanted to include an audio recording of my name on my About page, allowing people to access it at their convenience.

Tutorials

For reference, here are the original tutorials I used in creating this:

Youtube: Playing Audio On Click in Webflow (With some Javascript) | Quick Tip

Stack overflow: How to play google drive mp3 file using html audio tag?

01 — Setup

First I uploaded the audio file (MP3 or WAV) into my google drive and set the sharing access to “Anyone with link.”

02 — Links

Grab your share URL, and make sure it’s accessible to public

https://drive.google.com/file/d/1y99Gxa2BbS5jNYkYO6IfT6fjLok1AbCW/view?usp=sharing

From the share link, identify & copy the URL id

Splice the id into the URL for playing the audio. (Replace {id} with your own id)

https://docs.google.com/uc?export=download&id={id}

This is the resulting URL that will play your audio.

https://docs.google.com/uc?export=download&id=1y99Gxa2BbS5jNYkYO6IfT6fjLok1AbCW

03 — Custom Code

Now we need a button on the page to play the audio file. I used a div class as my button and named it “name-audio.”

Setting up your layers

Create a div class in Webflow to act as your button to trigger the audio

Note: The name of the div element (aka the button) on the page must have the same name as the class name in your custom code.

Audio Code

Add your URL to the code.

<audio id="audio" src="YOUR LINK HERE"> </audio>

<script>
const audioElement = document.getElementById('audio'); 

const playName = document.querySelector('.name-audio'); 
playName.addEventListener('click', function(){
audioElement.play();
});

</script>

Webflow Page Settings

Paste the custom code into your page settings

screenshot of custom code for my About page

04 — Final

Save page settings, publish the site, and you’re done! (｡•̀ᴗ-)✧
(If it doesn’t work, check the errors from your console!)

Summary

Setup
1. Upload audio file onto a cloud platform and set the sharing access to public
Links
1. Copy your share URL
2. Identify & extract the URL id
3. Splice the id into the URL for playing the audio. (Replace {id} with your own id)
4. Insert the resulting URL into the custom code
Webflow
1. Create a div class in Webflow to act as your button to trigger the audio
2. Add your URL to the code.
3. Paste the custom code into your page settings
Final
1. Save settings & publish the site!

Thanks to

Shoutout to Jasmine for debugging my code & moral support! ( ⸝⸝´꒳`⸝⸝)♡‧₊˚

sprouts & thoughts 🌱