![]() Am I missing something? 6 years, 1 month ago The html5 audio tag seems to download in the background on load in the most browsers. 6 years, 1 month ago Thanks for your time, I tried your solution but as you can see from here it downloads the mp3 media file again on background. Make sure to remove the unnecessary tag from the html, browsers seem to download all audio files in those tags on load and attributes like preload=false seem to be ignored.ġ6 6 years, 1 month ago Related Topics json javascript jquery audio waveform Comments 6 years, 1 month ago So basically you want it to draw a waveform but only download the song when the playbutton is clicked? This is not part of waveform.js for some cray reason, let's see if I can write a hook or some implementation to make it draw without downloading the music. Setting the peaks in the backend variable and calling drawBuffer did the trick, combining that with some play button logic and we get the following code: //Create new wavesurfer Took me a while to hack around the wavesurfer js code to find out how I can make it draw without loading the song already :P So basically I need to focus on wavesurfer.load and add a new function to this Javascript to only draw from peaks(JSON data) the waveform and don't download audio file on page load but only when the user hit the play button. Wavesurfer.load(document.querySelector('#song'), ) The problem is that on page ready the Wavesurfer-JS download on background the audio file all the time (and not only when the user hit the play button). On frontend I use Wavesurfer-JS to draw the waveform based on previous JSON data. I am very close to it working the way I want.On my server I use Audiowaveform to generate JSON data from my audio files. Song in the main audio player at the top as shown below. Song in the list has just a play button when clicked will auto play the I would really like to have a wavesurfer player in the header and each Worksįine, but is a bit cluttered with many players on screen when the list is I am making an audio website and currently I have each song in an htmlįile being called into a list. ![]() To helpĮxplain, here is what I am trying to achieve. Here now, but if you have any other ideas it would be awesome. On Mon, at 7:53 AM, CaptainWeirdBeard < to keep bothering you on this one. The attribute is not null, then call destroy() before setting the attribute Of the current_audio and call loadStream (See documentation for this), if Wavesurfer attribute, so whenever you click on play you set the attribute Header, so you could have a let's say a current_audio object which has a I would use the wavesurfer.loadStream, you already have the DOMElement in here is an example of something very similar. ![]() Any more help or guidance on how I can adjust thing to achieve this would be greatly appreciated. I am very close to it working the way I want. Also I have the wavesurfer in a sticky floating header so it is always on top and visible. I would really like to have a wavesurfer player in the header and each song in the list has just a play button when clicked will auto play the song in the main audio player at the top as shown below. Works fine, but is a bit cluttered with many players on screen when the list is large. ![]() I am making an audio website and currently I have each song in an html file being called into a list. To help explain, here is what I am trying to achieve. I'm madly trying to figure it out here now, but if you have any other ideas it would be awesome. ![]()
0 Comments
Leave a Reply. |