How to add multiple audio players and multiple slideshows to the same webpage In the generated HTML file audioplayer.html and slider.html, copy the HTML code snippets from the body section and paste them to your webpage where you want to display the player and the slideshow. In short, there should be only one line of jquery.js in the webpage, and it should be placed before all other scripts. When adding the code, remove the duplicated reference to jquery.js in the second code snippet. Copy the HTML code snippets in the head section, then paste them to your webpage before tag. Open the generated HTML file audioplayer.html and slider.html from local hard disk with a text editor or HTML editor. You also need to copy or upload them to the same folder as the webpage. You need to copy or upload all of them to the same folder as the webpage where you want to display the player.Īmazing Slider will also create one HTML file and two folders. Step 1 – Create an audio player and a slideshow, copy or upload the generated files to the web folderįirstly please create an audio player with Amazing Audio Player and a slideshow with Amazing Slider, then copy or upload all of the generated files and folders to the web folder.Īmazing Audio Player will generate one HTML file and two folders. Step 1 – Create an audio player and a slideshow, copy or upload the generated files to the web folderĪt the end of this tutorial, we will also discuss how to add multiple audio players and multiple slideshows to the same webpage.Now let's move on to the function for switching songs.This tutorial will show you how to add an audio player created with Amazing Audio Player and a slideshow created with Amazing Slider to the same webpage. onload, it needs to perform some actions when the page loads, in our case, it assigns a value of zero to the treck variable.Ī lot of people have questions about why we should assign a value to a variable at page load time and not at declaration time because otherwise its value would always be zero, and we need to use it to switch songs. The most interesting thing in this code is window. Next, let's make an array with track names and a variable that will store the index of the track in the array. Here we just take the elements we will work with, we take the element through the id and the rest through the selector. Let btnNext = document.querySelector(".next") // Take the button to switch the next track prev") // Take the switch button of the previous track Let btnPause = document.querySelector(".pause") // Take the pause button Let btnPlay = document.querySelector(".play") // Take the play button Let time = document.querySelector(".time") // Take the audio track JavaScript let audio = document.getElementById("audio") // Take the audio element It's time for the most important thing, to create the basic logic in pure JavaScript, first we'll take all the elements from the HTML. We have a small track, gray, and when playing it will be almost black due to the increase in with the class time. Now let's move on to CSS, with its help we will change only the track, we will leave the buttons by default, as they are made in the browser. Let's break it down, with the class audio-track, this is the audio track, inside it there is a with the class time, this is the remainder of how long there is left to finish.Īlso go next are four tags, this button, the first to play music, the second to pause, the third switches to the previous track, the fourth button to the next. Since we now have a blank screen, we will add buttons to control, also a tag for the audio tracks. XHTML Īs you can see the standard HTML player looks nice, but there is one problem, its capabilities are limited, you can only stop the track and change the volume and all, which in my opinion is not enough, so we will remove the attribute controls, after which we will have an empty screen. Let's start with HTML, there is nothing complicated here, just write the tag inside the document and add an attribute controls. Creating an audio player:įirst, let's analyze the logic of the player and what we implement here, and implement the switching of tracks, and the playlist itself, as for the pause, then in HTML already by standard it is. In this article you will read about how to make an audio player for your website or Open edX LMS with royalty free music in JavaScript and HTML, if you are wondering how to do it, you are here.Īlso check out our HTML tutorial if you don't know it well.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |