CSS HTML5 AUDIO PLAYER CODEI hope you like the collection of html5, CSS and javascript based audio players code snippets. See the Pen Music Player – Mobile Interface Carousel by Aude ( on CodePen. See the Pen Music Player Design In CSS by Ahmed Tarek ( on CodePen. See the Pen Reel Player – SQ by Drew Endly ( on CodePen. See the Pen Music app – TweenMax by Jinn Wang ( on CodePen. See the Pen Player by Ivan Odintsov ( on CodePen. See the Pen #dailyui 009: Music Player by Gabrielle Wee ✨ ( on CodePen. See the Pen Music Album by Kyle Lavery ( on CodePen. See the Pen 3D Cube Media Player CSS only – Chrome by Jamie Coulter ( on CodePen. See the Pen Music Player 2.0 by Emil ( on CodePen. See the Pen Music player by Shayan ( on CodePen. See the Pen Lyrics Player by Zed Dash ( on CodePen. Value = Math.floor((100 / audio.duration) * audio.See the Pen DailyUI #009 | Music Player by Julie Park ( on CodePen. Var prev = $('#playlist li.active').prev() Var next = $('#playlist li.active').next() InitAudio($('#playlist li:first-child')) After that is done, we are going to add the Playlist functionality code.Value = Math.floor((100 / audio.duration) * audio.currentTime) Var m = parseInt(audio.currentTime / 60) % 60 Var s = parseInt(audio.currentTime % 60) I had attached the code:Īudio.volume = parseFloat(this.value / 10) Now we are going to add code for volume control and time duration in your main.js file.Main.js: var audio = new Audio('media/Linkin Park - Papercut.mp3') Now, we are going to add three buttons to our application using JavaScript for which you will need to go to your js folder and open the main.js file and add the following code:. Steps for creating Play, Pause & Stop buttons: Open that file and add the following code:īackground: -moz-linear-gradient(left, #78284a 0%, #6d8a9f 100%) /* FF3.6+ */īackground: -webkit-gradient(linear, left top, right top, color-stop(0%,#78284a), color-stop(100%,#6d8a9f)) /* Chrome,Safari4+ */īackground: -webkit-linear-gradient(left, #78284a 0%,#6d8a9f 100%) /* Chrome10+,Safari5.1+ */īackground: -o-linear-gradient(left, #78284a 0%,#6d8a9f 100%) /* Opera 11.10+ */īackground: -ms-linear-gradient(left, #78284a 0%,#6d8a9f 100%) /* IE10+ */īackground: linear-gradient(to right, #78284a 0%,#6d8a9f 100%) /* W3C */īackground:url(./images/knob.png) no-repeat īackground:url(./images/play.png) no-repeat īackground:url(./images/pause.png) no-repeat īackground:url(./images/stop.png) no-repeat īackground:url(./images/prev.png) no-repeat īackground:url(./images/next.png) no-repeat īackground:url(./images/progress_bg.png) no-repeat īackground:url(./images/progress.png) no-repeat For that, open your css folder and inside that you will see your style.css file.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |