# How can I start playing music by clicking on widget?

**URL:** <https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615>\
**Category:** Custom code\
**Created:** [August 29, 2022, 1:03pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615 "2022-08-29T13:03:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_442002](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/_442002/32/470_2.png) [@\_442002](https://forum.readymag.com/u/_442002)\
**Post date:** [August 29, 2022, 1:03pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/1 "2022-08-29T13:03:00Z")

</div>

Hello, in my graduation work I need to turn on music by clicking on the widget.

I tried to write the code, but it didn’t work out, I’m upset. Is it even possible?

I could leave you a small donation for your help…

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [August 30, 2022, 3:39pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/2 "2022-08-30T15:39:30Z")

</div>

HI @_442002 I would suggest sharing the code you have! But here i’ve attached an example.

```auto

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

<script>
var audioNAMEHERE = document.createElement('audio');
audioNAMEHERE.setAttribute('src', 'YOUR-AUDIO-URL-HERE');
audioNAMEHERE.addEventListener("load", function() {
  audioNAMEHERE.play();
}, true);

$('[READYMAG DATA ID HERE]').click(function() {
  audioNAMEHERE.play();
});
</script>

```

---

<div class="post-metadata">

**Author:** ![\_442002](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/_442002/32/470_2.png) [@\_442002](https://forum.readymag.com/u/_442002)\
**Post date:** [September 18, 2022, 3:24pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/4 "2022-09-18T15:24:43Z")

</div>

Hello, thank you SO much for the answer, I just saw it now. I don’t understand your code well, but I did everything as indicated in your comments: I added a link to the sound and found the ID of my standard shape‐widget readymag, BUT nothing worked for me. nothing happens by click, please poke me in my the error. Thank you dear!

 ![Screenshot_49](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/1X/960ec7364c78f7ce1eec32383b852fc5260c23d2.png)

---

<div class="post-metadata">

**Author:** ![\_442002](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/_442002/32/470_2.png) [@\_442002](https://forum.readymag.com/u/_442002)\
**Post date:** [September 18, 2022, 3:57pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/5 "2022-09-18T15:57:10Z")

</div>

thank you very much, I got everything, I had to replace the numbers with words

---

<div class="post-metadata">

**Author:** ![Mind\_Garden](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/mind_garden/32/843_2.png) [@Mind\_Garden](https://forum.readymag.com/u/Mind_Garden)\
**Post date:** [February 16, 2023, 1:21pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/6 "2023-02-16T13:21:59Z")

</div>

Hi, I’m struggling with the same issue. Don’t really know much about code, so I also can’t seem to figure it out myself. What am I supposed to fill in at the “audioNAMEHERE” parts of the code? If I fill in the name of my audio file that’s in dropbox it won’t work. Please let mr know! Thanks

 ![Screenshot 2023-02-16 at 14.21.37](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/1X/62209b17fe53ef2a6d92a474172ae8d53a589018.png)

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [February 17, 2023, 8:25am UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/7 "2023-02-17T08:25:40Z")

</div>

simply change “audioNAMEHERE” to “GARDEN”

---

<div class="post-metadata">

**Author:** ![Jagoda\_Lasota](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/jagoda_lasota/32/1083_2.png) [@Jagoda\_Lasota](https://forum.readymag.com/u/Jagoda_Lasota)\
**Post date:** [May 22, 2023, 10:45am UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/8 "2023-05-22T10:45:25Z")

</div>

i also tried to implement the code and failed;

 ![image](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/e/e68a253fe781988850243d938cd145fffcdf89b4.png)

could you tell me where is the problem? the pic is not clickable.  
i tried to put the code into every tab (head, before/after body, css) but it didnt work at all.  
i would be super grateful for your answer!

---

<div class="post-metadata">

**Author:** ![David\_Ambushed.tv](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/david_ambushed.tv/32/608_2.png) [@David\_Ambushed.tv](https://forum.readymag.com/u/David_Ambushed.tv)\
**Post date:** [June 15, 2023, 4:14pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/9 "2023-06-15T16:14:53Z")

</div>

Hey HEADLESS.HORSE your code is awesome and works like charm. It wil be awesome if you point us to to some code that will pause the audio as well. Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Hi\_Rez](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@Hi\_Rez](https://forum.readymag.com/u/Hi_Rez)\
**Post date:** [September 13, 2023, 2:54pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/10 "2023-09-13T14:54:38Z")

</div>

Hey David. Did you find out how to pause the audio?

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [September 13, 2023, 3:21pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/11 "2023-09-13T15:21:04Z")

</div>

maybe, because your src url isnt directly an mp3 file? it ends with “sharing” not with .mp3.

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [September 13, 2023, 3:22pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/12 "2023-09-13T15:22:54Z")

</div>

You can set up a pause if you use the same **“…click(function() (…”** listener and then just do **“AUDIO.pause();”**

---

<div class="post-metadata">

**Author:** ![kellyann\_marie](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/kellyann_marie/32/4099_2.png) [@kellyann\_marie](https://forum.readymag.com/u/kellyann_marie)\
**Post date:** [February 22, 2026, 8:50pm UTC](https://forum.readymag.com/t/how-can-i-start-playing-music-by-clicking-on-widget/615/13 "2026-02-22T20:50:22Z")

</div>

Hey, i can’t seem to get this to work

Here’s my exact code, please help soundcloud ruins the vibe!

 ![Screenshot 2026-02-22 at 3.51.19 PM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/9/9791d4ee3a724ce15691724075e7ed0a33850e58.png)