Putting it all together and the final HTML file should look something like this.
#Angular2 wavesurfer js code
The diagram below demonstrates where each of these elements will be used, with labels indicating each individual HTML code block. That's all the code required for the HTML.
The timecode will output the current timestamp and total duration of the audio track. The player body contains an empty div for the waveform, as well as elements for the volume controls and the timecode. Player Bodyīelow the play button, we can add the player body. It is important to add the id attribute to this element as we'll be using this to select it later on in the javascript. Inside the button element, we add an image linking to the SVG icon for the play button. Inside the audio-player div we first create a play button. Inside the body, we need to add two tags, a main tag with a class of container and a div inside with the class of audio-player. The HTML is pretty simple, a standard HTML file with a link to the style.css stylesheet and both the wavesurfer.js script and the external script.js. We need four icons, one for play, pause, mute and, unmute.
#Angular2 wavesurfer js free
You can use any icons you'd like, but I'd recommend checking out, which has a great collection of free and open-source SVG icons. Grab the latest version of Wavesurfer.js from Unpkg. The overall is structured as follows: index.html style.css script.js assets/ ├─ icons/ │ ├─ play.svg │ ├─ pause.svg │ ├─ volume.svg │ ├─ mute.svg ├─ audio/ │ ├─ sample.mp3 Wavesurfer There is also an assets folder, which will contain a folder for icons and an audio folder for the sample MP3 used in the project. The structure of the app is fairly straightforward, with just three main files, an index.html, style.css and script.js. You can grab a copy and follow along to understand how it all comes together.
If you'd like to dive right into the code, it's available on GitHub. The only third-party code required is Wavesurfer.js, which will render the waveform and help when handling the playback control functions. It's built using plain HTML, CSS, and vanilla Javascript. Is there a known bug for something like this? I know that on the waveform initializes fine, and in trying to reverse engineer I cannot find why my instances dont seem to initialize without clicking play.Īny help here would be really appreciated! ThanksĮDIT: So I tried changing the MediaElement to WebAudio and it initialized as needed.This tutorial will walk you through the steps required to create a SoundCloud-style audio player with custom audio controls and a live waveform. For whatever reason it responds properly when clicking play or trying to play a different track that I have already loaded. I tried locating where things are going wrong and it seems to me that the function basically pauses as it hits the. When loading the page in iOS the waveforms dont display, and then only fade in when I click my play button.
#Angular2 wavesurfer js android
This is works extremely well on computers and Android phones, however it does not fully work on iOS. So Im using AJAX to create instances of the wavesurfer class through an AJAX request and loading the file as a MediaElement.
0 kommentar(er)
