Streaming live at 10am (PST)

Play music on click

Hello lovely community!

I’m wondering if its possible to put a simple play button to play a song in webflow! I know its not a good practice to add bg music to a site, but I wanna build a more artsy experience rather than an info website.

I found a few javascript codepen things but can’t make them work in webflow! I have to mention thatn I’m not a coder so, the simplest way around would be better for me, don’t need any fancy function, just play something when I click something and thats it!

Any help? Or, if anyone can do that for me I’m willing to pay for it! I can build the site and you just add the music play interactions.

Thanks a lot in advance!

I haven’t build anything yet, so, no read only link :stuck_out_tongue:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@ricardopah - check out this post:

2 Likes

if you just want a very simple no frills then look at html player.
You will need to host your mp3 file somewhere and point it to it.
Just do a search see how you get on.

1 Like

Thanks everyone! I believe just found my solution on something reaaaaally simple, I added a onClick attribute to my “play” div and added a simple =new Audio(‘audiolink.mp3’).play() and worked like a charm!

I found a workaround for the onClick attribute because webflow don’t let you add that attribute via custom attributes, but it was a simple script to make that happen!

Hello.
Can you share a clonable project please about your solution or develop your code ? Thank

1 Like

Hi Loic! Sure, I’ll put here the “instructions” I followed:

First I put some javascript code inside my head tag in the page sesttings.
This code:
<script> window.onload = function() { var anchors = document.getElementsByTagName('*'); for(var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; anchor.onclick = function() { code = this.getAttribute('whenClicked'); eval(code); } } } </script>

This is basically a “cheat” to use the onClick attribute in the custom attribute area of any div in webflow ui by changing its “name” to whenClicked

Then I just added that whenClicked attribute to the div I wanted as a play button here:


In the Name you should put the whenClicked attribute (check that you are spelling it correctly) and in the value field I put my play snippet
This one
new Audio('https://youraudiolink.mp3').play()

And thats it, whenever I click on the div, my audio plays without showing any ui or anything else.

Hope this helps!

1 Like

Oh wow, doing a getElementsByTagName("*") sure doesn’t seem performatic at all!! You’re basically moving through all the elements in the DOM. Is there a reason for you to not use something like

document.querySelectorAll("[whenClicked]").forEach((audioPlayer)=>{
    audioPlayer.addEventListener("click",()=>{
        eval(audioPlayer.getAttribute('whenClicked'));
    })
})
1 Like

Hi Jean!

Well, i don’t use that cause i don’t really know how! hahaha I’m not a coder I got the “whenClicked” snippet from other webflow user and worked for me, so didn’t research any deeper on how that works!

Where in my script should I put your code to make it better?

Hi !

Please @Jeandcc show us the way! :smiley:

Thanks

1 Like

What would be the code for pausing the audio when clicked?

I never found a way to pause the audio with this “method”. If you need more complex audio functions you should follow this tutorial


I think that is the best way to do it.