css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This audio player features playlist support via JSON data and step navigation. The version you're seeing now is a fresh new take on this project... by modernizing the style and offloading all browser detection crap to a wonderful audio player plugin called Plyr (https://github.com/sampotts/plyr).

Comments

  1. I love it! Doesnt seem to work in my computer. I use chrome 33 and tried with chrome beta (44). Either way, the best looking audio player I've seen.

  2. @TimLamber - Thanks man! I really appreciate it. I've seen a strange thing with the audio files working at first when you set the source folder (in JS) and then after some time they simply don't load. When I posted this pen last night everything was just fine, then as soon as it got more hits on Codepen it shut down for some reason. I'm not sure if it's a browser caching thing or if there were too many requests for one of the .mp3 files.

    I guess we'll see. Hopefully I can figure it out... and if I do I'll post a comment here.

  3. Very nicely styled. Nice transition to mobile display. Eager to see a version where the audio works.

  4. @TimLamber + @dapop : Thanks again for your comments. I've updated the HTML track list and the JS code so that it loads some alternative sample files (in .mp3 format). It seems to be working now. Let me know if they still don't load up.

  5. Issue: Audio files not loading after certain period of time or certain number of requests.

    Update #1: Using Firebug (in Firefox) I notice the following error in console...

    > HTTP load failed with status 403. Load of media resource failed.

    I am able to duplicate this error status in the latest versions of Firefox and Chrome as well as IE 10/11. I have also tried clearing cache and switching directories to no avail.

    My best guess so far is that most web servers do not allow directory browsing as a security measure (not sure about Google Drive). I'm wondering if the JS is causing the issue since it looks at the directory, file and extension separately and concatenates them together resulting in a complete file URL.

    After some searching I find this, so I'm not the only one experiencing the issue. I still have no idea why this happens but will continue investigating.

  6. Issue: Audio files not loading after certain period of time or certain number of requests.

    Update #2: Audio files hosted by archive.org seem to work flawlessly. Directory and file names have been updated.

  7. Added styles for IOS 8. Enjoy.

  8. Added styles for IOS 9 and updated styles for Chrome (mobile). Enjoy.

  9. Hi Mark, this is really awesome! I'm very new to the world of JS, and was wondering if there is an easy way to add album artwork to each track?

  10. @erikbue, yeah you could add artwork for every track but it depends on how you'd like it to display. Are you talking about showing the artwork somewhere when you click on a track to start playing it and then it would change when it auto-advances or when you click on another track?

  11. @markhillard, yeah was thinking there could be a big image of album artwork above the player that would update based on whatever song is playing

  12. @erikbue, thanks for clarifying.

    First, add an image reference for each track in the JSON like so:

    tracks = [{
        "track": 1,
        "name": "All This Is - Joe L.'s Studio",
        "length": "02:46",
        "file": "JLS_ATI",
        "artwork": "//example.com/art-1.jpg"
    }, {
        ...
    

    Then, create a new HTML element and an image "placeholder" inside it. This is where you your artwork will be displayed.

    <div>
        <img alt="">
    </div>
    

    Lastly, you'll need to update the loadTrack function expression so that each track's artwork will be displayed inside that element. In the snippet below, we're checking to see if artwork exists for the loaded track. If it does, we update the "placeholder" image source and if it doesn't, we show a default image.

    var art = $('#artwork img');
    if (tracks[id].artwork !== '') {
        art.prop('src', tracks[id].artwork);
    } else {
        art.prop('src', '//example.com/no-art.jpg');
    }
    

    Keep in mind that you'll need to add CSS to make your images responsive so they fit the container:

    #artwork img {
        display: block;
        height: auto;
        width: 100%;
    }
    

    I'd also recommend keeping the height and width of each image consistent (I'm guessing a square, like a CD or record).

    Hope this helps. Let me know if you have any other questions or if you have a working demo I can check out. I'd very much like to see what you're able to come up with. :-)

  13. Updated pen to fix all JSHint errors.

  14. wow,man,its awesome. i,m new in javascript code...i,m just begin to learn and i love your work. i am trying to implement a player,for practice...and i want to ask you...i hope not disturb...hehe. when add my tracks, i must create a folder with audio files?, not see the src links. Sorry for my ignorance and thanks in advance. Great!!!. Thanks for share

  15. @othar406, glad to help you out. You'll want to check the mediaPath variable in the JS. This is where you tell it to look for your files. This is the root directory of where your files will be and this string, along with the file name and finally the file extension, gets built out with JS.

    So then, in the tracks variable, we're creating an array with track objects and you'll notice that the file names don't include extensions yet. This is because I'm including 2 versions of each track (mp3 + ogg) and the following line at the end of the script does a quick test to see which file to play depending on browser support:

    extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
    

    This line of code also adds the extension at the end of each file name. So let's say you have a file inside a directory like this: http://www.example.com/tracks/track1.mp3.

    • mediaPath will be http://www.example.com/tracks/
    • file will be track1
    • extension will be .mp3 (or .ogg if you include that file as well)

    You should be able to use a relative path for mediaPath if you're developing locally, just to make sure it actually works.

    I hope all this makes sense and I hope you're able to get it working. Let me know if you have any other questions.

  16. This is really great! One minor addition I would like to see would be to keep the player and song title section dock to the top of the page when you scroll down, so when you choose a song way down in the list, you don't need to scroll back to the top, say if you want to jump to the middle of the track. Would also be good if each time the track progresses to the next, the list scrolls down 1 item, so the user remains aware of which song is coming next or if the end of the playlist is approaching, etc.

  17. Thanks @egreenbank! I'm always happy to receive UX advice and I think the updates you suggested will enhance the experience. If I have some time I'll see what I can come up with, but feel free to fork it and make any updates as you see fit. I'd love to see what you're able to create. Comment here if you're so inclined... and thanks again for the feedback.

  18. Hi Mark, thanks for your reply. I wouldn't know where to start so I'll make do with how it is unless you can come up with something! I'm getting an error when I try and skip the track whilst a track is already playing. It gets stuck in a loop and doesn't play anything. Error is on the line with "audio.src = mediaPath" + etc... Error = pen.js:71 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. I'd be tremendously grateful if you could take a look at my version and offer some advice. Currently hosting at http://eddie95.site40.net/Codepen.htm

  19. @egreenbank, in console, I'm getting the following error:

    HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://eddie95.byethost14.com/music-player/demo/mix/07%20Boston%20Bridge%20Breeze.mp3 failed.

    This error keeps repeating after each file tries to get loaded, and none of them are actually being loaded so I believe this is the reason for the looping. If it reached at least one file properly, then it wouldn't loop through and try to keep loading both of them over and over.

    I viewed the source of that page and found a possible issue based on that error message above. Basically, don't use spaces in file names. I think the %20 may be an invalid path in terms of a web browser trying to access them. In the JSON, try something like this instead:

    {
        'track': 1,
        'name': 'Boston Bridge Breeze',
        'length': '02:46',
        'file': '07_Boston_Bridge_Breeze'
    },
    

    ... and of course make sure to change the names of the files on your server.

    Let me know how it goes.

  20. Ah, I will try that out. Sorry if that's all it was, seems like such a basic error! Thanks for looking into it for me

  21. Any time @egreenbank, glad to help!

  22. @MarkHillard I tried that, the issue was not to do with spaces. However, clutching at straws I decided to clean out a load of stuff from the HTML tag. I'm not sure how I ended up with all these extra attributes in it but I just replaced it all with [html] and that seems to have solved everything!

    My next task is to figure out what makes the theme turn white when the page is viewed on my mobile using chrome browser. I want it to stay black. I've tried changing the obvious parts with no success.

  23. Hey @egreenbank, glad you fixed the issue. The theming works by detecting your browser's user agent and then adding a class to the html tag. There's specific CSS for each user agent (most popular devices and browsers), that sets the theme around the audio player. I did this to match the default audio player styles for each browser/device so it looks seamless. You can certainly remove the CSS for Chrome Mobile, but keep in mind that the audio player will still be white against a dark background, which might look a little weird.

  24. Hey Mark, this is great! I have been looking for something to create a list of short audio clips from interviews of teachers on an education site. In any case, I'm wondering why the HTML markup needs to have all the metadata in it when it looks like the JS has it all in an array. Would it not be possible to load this via AJAX?

    In any case, props to you, this is awesome!

  25. Thanks @maureendunlap! I'm glad it will help your project.

    In response to your comment about the HTML markup, you're right, it does not need to be in there and I've considered converting this over to an Angular.js application or simply using Handlebars for templating using the same JSON object. I just haven't had time to do this yet. AJAX would work as well and in that case the HTML would be generated by JS.

    If I have time to refactor this in the future, I'll let you know.

  26. Hi @markhillard

    How can I can use autoplay, repeat and shuffle function. Thanks for great audio player.

    Hieu Nguyen.

  27. Thanks @hieunm2012 !

    The idea for this audio player was to leverage the default HTML5 player and style the playlist and controls around it based on the browser/device... so I didn't build out UI elements that handle autoplay, repeat, and shuffle actions.

    That being said...

    You can use the autoplay attribute if you want the first track to play when the page loads.

    You can use loop attribute if you want to loop through a single track. To turn it on or off you'll need additional JS that handles the attribute toggle. See http://stackoverflow.com/questions/34143213/how-to-toggle-audio-loop-attribute.

    For shuffle, there is no attribute for this functionality in the audio tag. Once again you'll to write additional JS to handle shuffling.

    Reference: http://www.w3schools.com/tags/tag_audio.asp

    Hope this helps.

  28. Hey Mark,

    I exported this codepen but for some reason the audio player is not working at all when i load up the index page using multiple browsers. Even when i try to just change the mediapath on the codepen to my own download file path on archive.org, the audio player completely disables and the volume knob disappears.

    Can you export it and check it out yourself to see if it may just be something on my side. I really REALLY want to implement this playlist on my webpage but am having no chance in figuring out the problem.

    THANKS!

  29. @RedBlueBlueRed, are you including the following dependencies on the page you're working with?

    https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js and https://api.html5media.info/1.1.8/html5media.min.js

    Try this... go to https://codepen.io/markhillard/full/Hjcwu/, right click the page and view the frame source code (in Firefox you have the option: This Frame > View Frame Source). Copy that code and create a new HTML file on your computer. Then try to load that HTML file in your browser and see if it works.

    You may need to include the protocol for those dependencies (https://) to make sure your browser is loading the full path and not a relative path from your local machine. Open your web browser's development tools and go to Console. Are there any errors in there? If so, fix them then try again.

  30. Hey @markhillard,

    Thanks for the quick response. Yes i have been including both external js inside the head elements.

    Also i tried copying the frame source and creating a new HTML file but unfortunately it still doesn't work. I have also included the protocol but still nothing. Sadly, i'm a novice at web development so i have no idea how to fix the console errors. Here is a picture of it so maybe you can see the problem i'm having:

    http://imgur.com/IYwPmq2

    Thanks!

  31. @RedBlueBlueRed, in your screenshot, I'm seeing "file://" in front of those dependencies. This is why it's not working. You need to use "https://".

    In CodePen pens I always just use "//" because the protocol will be relative, so if I'm on an "https" connection, I won't get security warnings because it's trying to load dependencies via "http". So what you're seeing is your computer's file system trying to be used because those URL's start with just "//". Manually update them and you should have better luck.

  32. Hey @Markhillard, sorry for bugging you so much but could you explain to me how to change the height of the entire audio player?

    I know i can change the width using the "width" property in the css ".container" class, but when i add a "height" property to the class nothing happens.

  33. @RedBlueBlueRed, no worries. Since this is a responsive player, the height should be auto for .container. I think I may know what you're trying to do, and I'm assuming you want to be able to set the height of the playlist and scroll through the tracks. In that case, update #plwrap to:

    #plwrap {
      height: 200px; /* whatever height you want */
      margin: 0 auto;
      overflow: auto;
    }
    
  34. @markhillard Thanks for being so helpful man. The code worked like a charm.

  35. any idea why suddently a download button appeared in Chrome? and not in IE and FF. am figuring how to remove..

  36. @svencajueiro ... since the player uses the default audio player in whatever browser you're using, you're sort of at the mercy of them. In this case, I'm not sure if you can remove that because it's in the audio element itself. Looks like Chrome added this as a new feature in that element. I also know that the Chromecast icon will show up in it if you're near one.

    Looks like Chrome (on desktop) changed their color scheme to white, so I'll need to edit the player styles again.

  37. was afraid of this, thanks, will search for a way though

  38. audio::-webkit-media-controls { overflow: hidden !important }

    audio::-webkit-media-controls-enclosure { width: calc(100% + 32px); margin-left: auto; }

  39. @svencajueiro, nice trick! I like it.

  40. Updated Chrome Desktop styles.

  41. This is confusing ... What should I use to program my playlist? one html file has all the paths for the playlist inside, in the demo package the paths are in the css file, it seems like there are 2 versions of your audio player here ...

  42. @Bodhidharma, I'm not sure what you mean by "demo package". Did you grab the code from CodePen or somewhere else? Whatever is in here is the most recent version and there's only 1 version of the player. The playlist in the HTML is just for building out the track listings, and the JSON data in the JS file needs to match whatever is in the HTML. The JSON data tells the player where to look for the actual audio files, set track length, track name, and track playlist order. The mediaPath variable is the root directory of your files...

    mediaPath = '//archive.org/download/mythium/',

    So you would change this to suit your needs.

  43. Thank you, I dit it this way, inserted everything to my website, but I only get a black screen. The cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js seems to interfere with the jquery/1.8.3 of my template ...

  44. @Bodhidharma you can feel free to remove that jQuery 3.0.0 reference from the code since that will cause a conflict. jQuery 1.8.3 should work just fine.

  45. Thks & more thks Mark, very useful to me. All the best,

    angela, : )

  46. Hi, Can someone explain to me what's // mediaPath // in file JS I've to set for directing the audio play list to my local directory . I will be so much grateful...

    Thks very much : )

  47. @angelazest, the "//" means it's a protocol relative url, meaning it will detect "http" or "https", depending on the site you're on. I use this a lot for file references in Codepen pens because http://codepen.io and https://codepen.io both work. So either way you get to the site, the "//" will pick up whatever your web browser is using at the time.

    If you're trying to run this locally, then I would recommend using this type of format: file:///C:/.../file.mp3. This would be the full path (folder) up to the file name. For the mediaPath variable, you'd want to paste that full path there (without file names of course - just up to the parent folder), then just make sure all your audio files are in that folder you're pointing to.

    Here's some more info: http://stackoverflow.com/questions/21737224/using-local-file-as-audio-src

    You'll need to make sure that your web browser is actually loading the files from the right directory, otherwise the audio player won't work. Hope this helps!

  48. `Hi Mark, Thanks a lot : ) All the best, angela∞

  49. New version builds playlist dynamically from the tracks object, so you no longer need to hand code HTML for each track.

  50. This is great. Are there any alternatives to feed the playlist to the player. I want to use this in the mobile app and the audio tracks file and name comes in the form of JSON response. How to make that work with this player ? Thanks

  51. How display songs of this page: http://cs1.mp3.pm I can't do it.

  52. much thanks for this, mark. the best player that i've come across. one question: is it possible to have several playlists? i have different categories which ideally would be separate and have a heading above each list. all songs would play on the same player. thanks!

  53. @markhillard Brilliant player. Works really well. Thanks.

    @chrisjh17 I'm in the same boat. I have a page with several playlists. I want to keep them on one page using vertical tabs. It looks good, but I can't make multiple playlists work on the page. I tried to change the code to have multiple IDs and it's not working. Just curious to see if there is an idea how to do this.

  54. @chrisjh17 and @philippatel, I never made the player to handle multiple playlists. The JS would need to be re-written in as a plugin of sorts that accepts parameters so you can create new instances of the player. If anyone wants to fork the pen and re-work it go for it. Sorry but I just don't have time to do this.

  55. This is a beautiful player, great work! I got it working on my raspberry pi server, now I can stream my home music collection from anywhere!

    Cheers!

  56. Can this be modified to also play flacs?

    I changed the acceptable extension line to say:

    extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : audio.canPlayType('audio/flac') ? '.flac' : '';

    which at least makes it display the track names, but I'm not sure how to go about actually making it play the files. Any tips? Thanks!

  57. Hey @infermachine, I'm glad to hear you got the player working on your server. It's really cool that you can now stream your music anywhere. To answer your latest question, I checked browser support for FLAC at http://caniuse.com/#feat=flac. It appears a few modern browsers support it, so I'm not sure why it's not working for you... unless you're using a browser that doesn't support the format. Are you getting any console errors in your browser's dev tools when trying to play that file type?

  58. Thanks for the response! I checked the console errors and it was adding a .mp3 extension instead of .flac, so there's something wrong with my command where i set my extension variable. If I just set it to extension = 'flac' , it works perfectly! I'll play around with it and if I find a cleaner solution I'll edit this post.

    Also Re: browser support, apparently even the crappy Chromium browser on my rpi can play flacs! Hopefully Chrome for IOS gets an update sometime!

    Cheers!

  59. Hi Mark,

    thanks for your awesome player. I'd like to use it as a podcast player, where the playlist is made up of several episodes. The trouble is the preload attribute in the audio tag. Everytime I load the page, all mp3's are downloaded and that unfortunately messes up all listens stats. I have tried to remove the preload attribute, but then the playlist is not working anymore. Do you have any suggestion so that only the selected episode gets downloaded once the play button is clicked? Thanks.

  60. @gilibaus thanks! To be honest I never built this to play podcasts, so I'm not sure how to achieve what you're trying to do. I would assume there's not much you can do to manipulate how the preload attribute works, but I do wish you luck. If you come up with something I'd love to see it.

  61. Love the player. But I have a question about the audio control bar. Is there any way I can delete the "download" arrow (arrow icon pointing down with underscore) from the control bar? Or hide it somehow with HTML and/or CSS/js? I am using it on a website and my client would rather avoid any copyright infringement. Thanks!

  62. @GeeJay, Thanks! It sounds like you're using Chrome, and I'm actually wondering why you're seeing the download button because the Plyr plugin doesn't support that on its interface. I went to this Pen in Chrome and I don't see a download button. Are you sure that Plyr is being loaded? Do you have a screenshot or a URL I can visit?

    I also found this: https://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome and this: https://googlechrome.github.io/samples/media/controlslist.html

    You could add controlsList="nodownload" to the audio tag, but the only problem is, this is a new attribute only supported in Chrome 58 and higher, so anyone who has an older version may still see that download button. After doing a bit of research, unfortunately I'm not sure if there's a way to completely remove it for all possible cases.

  63. Mark, Thanks for quick reply. One reason (among many) I chose your player was that I, too, did not see the download button in the player in the CodePen sample, and that was an important element. But now in the webpage it IS showing. URL is here: http://www.musicandme.us/playlist1.html In the meantime I will consult the links you provided. Any additional help or info you can provide after you view the webpage will be greatly appreciated. Would VERY much prefer to keep using your player on this site, if not for the pesky download button appearing. Thanks again!

  64. Mark, In my middlin' developing skills, I believe I solved the problem, thanks to your help. Went to the stackoverflow link and saw the small bit of code "controlsList="nodownload" and added that after your "controls="controls" HTML, and it worked. Will test to see what happens in other browsers with that bit of code added. Thanks so much.

  65. @GeeJay, glad you were able to get that HTML attribute to work for you. One thing I did notice, however, is an error when I had my dev tools open while loading that page: ReferenceError: plyr is not defined

    I checked the source of that page and it appears you're not loading the Plyr plugin on the page. You'll need to add the script located at https://cdn.plyr.io/2.0.13/plyr.js somewhere on the page and then Plyr should initialize properly.

    I'd still keep that attribute on the audio element as a fallback, just in case Plyr does not load from the CDN for some reason.

  66. Mark, If you have a moment to please look at the source code on that same page again and let me know if I correctly added the plyr.js code, I would very much appreciate it. If incorrect, if not too laborious on your part, please instruct me as to the correct method. Again, your time and effort is very much appreciated. Your input is invaluable for a newbie like me.

  67. @GeeJay, I see you've added the dependency for the Plyr plugin, but it's being loaded right inside the body tag (at the end of the page). So what's happening is that you're calling a JS function to load Plyr, but the page hasn't loaded the dependency yet. Is it possible you can put your important scripts like this one as well as jQuery in the head tag? In other words, the plugin needs to be loaded first and then you can run the plyr() function. Does that make sense?

  68. Hi Mark, thanks for your awesome player. this is a static playlist, I want to be dynamic, I want to send the data from php while loop to the tracklist array. can you help me?

  69. @ozano0810 I barely touch PHP so I wouldn't be much help, sorry man.

  70. Hi Mark, awesome player and so easy to customize. Fantastic for a grasshopper like me! Wondering if there's a way to not have a default song? The one that the player autoloads when you visit it. So that users would have to select a song in the list themselves to start with. And where "Now playing.../Paused..." & the songtitle is displayed, some other text is shown when no song is selected.

    Cheers!

  71. @musikpojken Was able to not have a default song selected by setting the index variable higher than the number of songs. And the default text was just overlooked by me, it was in the html:

    However, when no song is pre-selected, the player is repositioned higher up in the layout than when a song is selected. Any workarounds for this?

  72. @musikpojken Solved the above question by editing the #nowPlay in css under Media Queries to display:inline; and then just putting letters (or &nbsp for blanks) in the spans.

  73. @musikpojken sorry I haven't gotten back to you, I've been quite busy. I'm glad you like the player and were able to get it working!

  74. Mark (or anyone), I'm desperate for a loop function. DESPERATE. I've gotten your code to work at http://www.rpgmodern.com/mp3_player/player.php and have looked at the advise you gave to as similar query before, I just can't work it out. I'm one of those cut and paste programmers :) Anyone, please help!

  75. This is a fantastic player. I've been playing with this and seem to be running into the same issue that you did back on 3/7/2014 where the files don't load after certain period of time or certain number of requests. I've tried hosting the files via public links on Google Drive and dropbox instead of through my webhost, but can't get anything to work. Is archive.org the only hosting solution?

  76. @jkvincent, thank you! it's the only service I've found that will truly work. I'm sure there are others out there, or if you run your own public server to host your audio files on - then you'd be able to control these settings.

    I've tried Google Drive in the past with the same result as you, so that won't work. Good to know about Dropbox as well, and I would assume that Microsoft OneDrive may be the same.

    If you happen to find another 3rd party hosting service that this will work with, please comment here.

  77. Hi Mark, thanks for your awesome player. its really helped me a lot in my project. actually i got issue in scrubber can you help me

  78. Updated Plyr to v3.3.21

  79. Hello. Great job! This is by far the most readable audio player with playlist on the internet. One question: If I was to assign a different playlist to the tracks variable based on a previous click, for example an album cover, how could I do it?

  80. @jose-reis, thanks! Album artwork will need to be added in the tracks JSON and corresponding HTML/CSS will need to be built. Actually, if you scroll up in the comments thread, I provided some code to another user that will help with this. I know there a a lot of comments so, on https://codepen.io/markhillard/details/Hjcwu, search for the word "artwork" in your web browser and hopefully that will get you going.

  81. @markhillard thanks! I did read that comment, I just phrased my question in very bad english :) What I meant was how would I introduce multiple playlists instead of just one?

  82. @jose-reis, gotcha. I haven't gotten that far yet, so I'm not sure. I would assume you'd need to figure out how to dynamically load a different set of JSON (tracks) and then force the player to reload with the new data.

  83. Hey @markhillard,

    I just found your solution and first of all thank you, for example, I need a little bit different but quite similar solution. What I want to accomplish is to use video as a dynamic parameter in "[]". Do you have some guides or something that can help me? Second, this is some badass music man, who is an Artist? :D

    Update: I was manage to do something about it :-D https://codepen.io/Soullighter/pen/zLVKVe?editors=0010 Thank you for code example!!!

  84. @markhillard thanks again. I will try to implement a solution based on your code.

  85. Hello, I have a question..hope you will answer..... How can i change the music source to input my own musics?? and is this possible to fixed the player on top? Thanks...

  86. @markhillard Hello, I have a question..hope you will answer..... How can i change the music source to input my own musics?? and is this possible to fixed the player on top? Thanks...

  87. @Soullighter, nice job man! Looks great.

  88. @markhillard is there any way to change those songs with each individual links?

  89. Hello Mark, Very, very nice job. I'm trying to change the code to autoplay the first track when the page loads. I have read the comments and you wrote somewhere "You can use the autoplay attribute if you want the first track to play when the page loads." I am not so good at coding and I can not find where to change it. I am afraid to break the code. Could you please explain it? Thank you very much

  90. @Arrowman thanks! To autoplay, simply add the autoplay attribute directly in the HTML, like so: https://www.w3schools.com/tags/att_audio_autoplay.asp

  91. Hello Mark, I am using Chrome web browser. I have added autoplay in every possible way and run your code in Codepen with no success. it is the correct line? Your browser does not support HTML5 Audio! 😢

    PS: In the link with the example you provide I can read: Note: The preload attribute is ignored if autoplay is present.

    Thank you!

  92. Hello, I was trying locally. Now I upload it all and it's working perfectly. It looks spectacular. Thank you, Mark!

  93. @markhillard I can't seem to get this to work!! I'm not sure what I am doing wrong, do you have a link to where I can just download all the files to be opened up in DreamWeaver? I appreciate your help.

    Thanks! :)

  94. @markhillard I've managed to get everything working now by reading through the comments about viewing the source code from a browser and using my own .mp3 files. I just wanted to say thanks for making this available to use. I really appreciate it. Again, thanks! :)

  95. how to add mp3 files ?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...