Published: 3 years ago

HTML5 Music Player (Updated)

Just a small update to make the music player compatible with IE7 and IE8. Now all major browsers are supported.

LICENSE: Unlike the rest of the resources on this site, this plugin is licensed under the MIT license.

media-box

Usage:

  //Initialize the plugin
   $('body').ttwMusicPlayer(myPlaylist, {options});

   //You can specify the following options in the options object:
   {
        currencySymbol:'$',
        buyText:'BUY',
        tracksToShow:5,
        autoplay:false,
        ratingCallback:function(index, playlistItem, rating){
                //some logic to process the rating, perhaps through an ajax call
        }
   }
//Build your playlist. The playlist uses the same format s jPlayer (an array of objects. However, this plugin requires you to add some additional parameters. A sample playlist item:
   {
        mp3:'mix/1.mp3',
	oga:'mix/1.ogg',
        rating:4.5,
        title:'Some song title',
        buy:'http://www.codebasehero.com',
        price:'0.99',
        duration:'4:28',
        artist:'Artist Name',
        cover:'images/cover.jpg'
   }
26 Comments.
  1. Paul says:

    Good day! My problem with the player is that I can not play the audio files in IE7/IE8.
    I’ll be very grateful if you could help me solve this problem. Hier is the Link to the site:
    http://lingen-koeln.de/bme/2013-09-26/Helene%20Fischer/demo/index.html

    Best Regards

    Paul

    • Paul says:

      funny thing is that when I go to the demo page with IE, everything works without any problems. But when download the demo folder and check local the index.html under IE7/8, the files can not be played. :(

  2. wenfan says:

    Hello, there’s a problem that, why can’t it auto play even if I set

    autoPlay:true,

    Thx a lot ! Looking forward to your help!

    • leosin says:

      me too..
      autoPlay:true invalid

      • Saleem says:

        Try auoPlay:true and autoplay:true. I vaguely recall the capitalization being wrong, but I don’t remember which is correct. I built this plugin a couple of years ago….

        • CreativeLatino says:

          It is with a lowercase “p”, autoplay

          • Scott says:

            Good call with the lower case “p”. I am sure that it is a lot of code for you to go through and change SO NICE keeping up with your comments here. Good Job!!!

  3. Alex says:

    Hi, I observed you have a big problem, the page is not loading if you have a _’_ in file name and/or title of the song

    even if it is escaped, \’ , still not working…

  4. Josh says:

    I canno’t Seem to get Two Tracks on, When I try Ie:

    //Build your playlist. The playlist uses the same format s jPlayer (an array of objects. However, this plugin requires you to add some additional parameters. A sample playlist item:
    {
    mp3:’mix/2.mp3′,
    oga:’mix/2.ogg’,
    rating:4.5,
    title:’Some song title’,
    buy:’http://www.codebasehero.com’,
    price:’0.99′,
    duration:’4:28′,
    artist:’Artist Name’,
    cover:’images/cover.jpg’
    }
    {
    mp3:’mix/1.mp3′,
    oga:’mix/1.ogg’,
    rating:4.5,
    title:’Some song title’,
    buy:’http://www.codebasehero.com’,
    price:’0.99′,
    duration:’4:28′,
    artist:’Artist Name’,
    cover:’images/cover.jpg’
    }

    There is just and error.

    • Dakaskos says:

      U forgot ‘,’

    • fishy says:

      add a “,” after the “}”

      ex:
      {
      mp3:’mix/2.mp3′,
      oga:’mix/2.ogg’,
      rating:4.5,
      title:’Some song title’,
      buy:’http://www.codebasehero.com’,
      price:’0.99′,
      duration:’4:28′,
      artist:’Artist Name’,
      cover:’images/cover.jpg’
      },
      { etc.

    • Ibrahim Omer says:

      Add “,” between tracks

  5. Starr says:

    This player is phenomenal. However, I am wondering how I can control where it is placed on the page. I am assuming I am missing something within the style.css file. Nevertheless, I a don’t want the player separate from the content on the site. Am I making sense?

  6. Ed Emerson says:

    Forgive me for I am an idiot. I’ve gotten the player working fine on my page but am at a loss to understand how to position it properly. It’s appearing at the bottom of my page, below the footer. I’m not very familiar with javascript.

    How can I tell it where to appear on the page? Do I need to add something after $(‘body’).

    http://vudoucircuit.com/emtw

    • fishy says:

      you can change the $(‘body’) to:
      $(‘.someclassname’)

      in the html add wherever you want it possitioned

  7. RMK says:

    Hey great work …!! Easy to use and just everything i need … :)
    But one question … how can i link on the player to play as example the 3rd track of the playlist?

    How can i start another track then the first one if i want to make a direct link from another location/website?

    Thanx for your great work!

  8. RaZz! says:

    I Love this! Thank you.
    How could I use currentTime? For example I want to put a Mixtape with 20 tracks in one MP3 in the player.
    How can I jump to the tracks?
    Best regards,
    RaZz!

  9. mehrdad says:

    How to Enable Volume Control?

  10. Oliver says:

    Hi, how can I choose where to place it? Regards

  11. Anton says:

    Hello, very good player. Is there a simple way to programatically switch to another track? For examle $(‘.jp-next’).click() don’t work for me.

  12. Trevor says:

    Hi,

    I love the player. Unfortunately it doesn’t seem to work in Firefox. When viewed in Firefox 24.0 on my mac the controls do not work and no audio will play. Has anyone else seen this or had any luck getting it to work? Works great in Safari (desktop and mobile) and Chrome.

    Thanks!

  13. chepalana says:

    Hello,

    I am trying to add number of times music is being played. I would like to call it everytime the song changes to it’s next track. But, I can’t find what event is used to play the next song.

    Can you please help me, any ideas?

    Thanks

  14. SenorCoolGuy says:

    Looks good, but needs a random feature.

  15. Ravi Kumar says:

    hello Saleem,
    u did a great job and i observed that ur ttwplayer code is based on jPlayer as i found it on jPlayer.org.
    I have two issues:
    1. u said that it will work on IE 7 and 8 too but it is not working.
    When i tried ur online it works but when i downloaded it is not.
    2. how can i have multiple instance of the player on the same page.

    Can u say something about my issues.
    thanks
    Ravi Bhadauria

Comments have been disabled.

Some HTML is OK