Play music on click

Community resources Freelance & Jobs
1

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)

2

@ricardopah - check out this post:

2 Likes
3

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
4

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!

5

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

1 Like
6

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:

image
image478×774 33.1 KB

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
7

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
8

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?

9

Hi !

Please @Jeandcc show us the way! :smiley:

Thanks

1 Like
10

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

11

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.

12

@ricardopah where are you hosting the audio file?

13

Sorry will! I don´t think this is useful anymore! but I hosted those ones in github while developing in webflow, and then in the clients server, it was godaddy hosting if I remember correctly!

14

You can indeed host audio files on Github—but it’s not a great long-term solution.

A simple solution I used to play an audio file without any controls is the following:

<audio preload="auto" id="audio1" src="https://github.com/your/audio/url/here.mp3"></audio>
<script>document.getElementById('clickforaudio1').addEventListener('click',function(){document.getElementById('audio1').play();});;</script>

All you’d need to do is give an ID of clickforsong1 to whatever element you want to click to play the audio. You can repeat these two lines for as many audio elements as you need. If you want play controls, then you should use HTML Player.