How to embed audio file for name pronunciation into portfolio (Webflow edition)
*play audio on tap* 🎧
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
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
Upload audio file onto a cloud platform and set the sharing access to public
Links
Copy your share URL
Identify & extract the URL id
Splice the id into the URL for playing the audio. (Replace {id} with your own id)
Insert the resulting URL into the custom code
Webflow
Create a div class in Webflow to act as your button to trigger the audio
Add your URL to the code.
Paste the custom code into your page settings
Final
Save settings & publish the site!
Thanks to
Shoutout to Jasmine for debugging my code & moral support! ( ⸝⸝´꒳`⸝⸝)♡‧₊˚