Play a Javascript player from HTML button

Question

I'm implementing an sticky audio player on a website and it's working fine. However, I'd like to create a play button, OnClick maybe, in HTML that would give a play in the player when the user clicked on it. I tried several codes and none worked.

The last one was this and it did not work either.

<button type="button" onclick="$(this).myPlayer();">Play</button>

In addition to the Javascripts and external CSS, which are before HEAD, the script that runs the player on the page (inline) is this.

<script>
    jQuery(function($) {
        $('body').myPlayer({
            firstPlaying: 0,
            autoplay: false,
            shuffle: false,
            //veryThin: true,
            slideAlbumsName: true,
            nowplaying2title: true,
            roundedCorners: true,
            //accentColor:"#cc181e",    //008DDE            
            pluginPath: "player/",
            playlist: [ 
                {mp3:"player/music/mymusic.mp3", title:"My Song", artist:"Mine", album:"Single", cover:"player/music/cover.png"}
            ]
        });

    });
</script>

From what I was researching, many articles mention using the HTML5 tag "data- *" inside the button code. However, I could not use it correctly.

If anyone can help me, I appreciate it.

I did a quick search and there's quite a few of them out there. This plugin should have an API to which you can use the player's public methods. You'll need to know exactly which player you have so you can operate it correctly. — zer00ne
– zer00ne, Commented Dec 5, 2016 at 16:33
Yep, zer00ne. I did that and got it after a few hours! Thank you. — matheo jean
– matheo jean, Commented Dec 7, 2016 at 16:57

31piy · Accepted Answer · 2016-12-05 15:36:15Z

1

I may not have understood your problem correctly, but here is a snippet you can try to get this working:

<button type="button" id="play-music">Play</button>

In your script, you can write something like this:

<script>
  $(document).ready(function() {
    $("#play-music").click(function() {
      $('body').myPlayer({ ... }); // Your code here
    });
  });
</script>

answered Dec 5, 2016 at 15:36

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

matheo jean Over a year ago

Thank, 31piy. Your code worked, but the mp3 file didn't play. I'd like that when I click the button, the player will already open playing the song. Anyway, thank you. That was the only tip that came closest to what I want!

31piy Over a year ago

@matheojean well that completely depends on the working of the player you are using. Please upvote and accept my answer if it helped you.

matheo jean Over a year ago

31piy, i got it from another way. But your tip was important for me. Anyway, thank you.

Collectives™ on Stack Overflow

Play a Javascript player from HTML button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related