Discussion on Audio Waveform Player with Playlist


Tean supports this item


This author's response time can be up to 2 business days.

39 comments found.

can you support by email?

Yes, I know, I used your shoutcast url to show you that it works on my side.


What you are getting on your side is cors error ( you are trying to load a file via ajax from a different domain than than the on hosting wavesurfer )


But I am not sure why it happens on your server and not on mine, settings are the same.

You can try adding data-remote attribute to awp-playlist-item, but I dont know if this is going to help:

li class="awp-playlist-item" data-type="audio" data-mp3="http://live2.radiorodja.com/;stream.mp3" data-remote

Have you tried some Soundlcoud link? (just for testing). If you get the same error, then you should use ‘data-remote’ attribute (which should first download the file, if possible to your server) , then decode waveform data (its not possible otherwise to decode waveform cross domain).

The weird part if is that this works on my server (Soundcloud and your shoutcast link above) without data-remote method above, while Podcast and Google drive do require data-remote method.

Let me know your findings, if it works for you with data-remote

Hey there, I copied your code from the documentation, but it keeps telling me this: jQuery.Deferred exception: $(...).awp is not a function TypeError: $(...).awp is not a function I also cannot find any function called awp in your files. Is there a file missing?

I can see $nbsp elements in browser console.

Then it comes from the JS…

Maybe the space from the tab key? Try removing this tab space if exist prior to coping html in your page.


I bought and downloaded the WaveFrom plugin and tried to install it within Wordpress 4.7.2 on OSX Server with Apache PHP 5.5.38 running on it.

If i tried to upload the .zip file direct to the plugin upload section of Wordpress, nothing happens after waiting for a while (it didn’t for ftp login either). Then i created a smaller .zip file without the media (sample) files in it and that one is uploading and now Wordpress is telling me unpacking and installing and then it stays like this, like its stuck and nothing is installed in the end also. I also tried to install it manually..unzipping and move the dir. in the WordPress Plugin dir. without success.

Can you please help?

Regards, Paul

Documentation only contains instructions for normal html page, this is not a wordpress plugin.

I any case i can not use this “static html” plugin but i need the WordPress plugin of WaveForm and your website tells me that it is for WordPress, so im confused…can you refund the money or send me the Wordpress plugin please

Where does my website tells that it is for WordPress?

This is different page. If you want that plugin, you will have to purchase it.

So how can you help me?

I want to buy your product. But I want to ask you a few things. I want to view my 1 hour long audio files on my website. Are these audio files downloaded at every time to make a waveform? Waveform is created by downloading the audio file when the web page is first opened ?. Does it take too long?

I have placed your song here: http://interactivepixel.net/env/awp/api5.html (its the first song)

I bought your product. Thank you very much for your interest.

Ok, thanks.

I run the downloaded code on the ASP.net platform. But the codes do not work. I wonder why?

Yes, we are not sure how to use it. What is the use of your computer Ram when you open the link? My computer uses 1.5GB RAM when opening the link. This is not normal! Link also does not open on the iPhone. We’re doing something wrong. Could you please explain in detail how we will follow the path?

Yes, we are not sure how to use it?

Documentation is included with the package and all the examples linked in the demo preview.

You should start with unmodified files in content folder, upload content folder to empty directory on you website and start from there.

Included demo examples and mp3 files work on iphone:


Also, when testing with unmodified files, remove peak files (those with extensions .peaks) from peaks folder so you can see if peak file creation is successful.

All my mp3’s are over 60 minutes. It constantly crashes in chrome. When I use the data-peak-load nothing loads and it still crashes. What can I do to fix this?

It did create waveform successfully on your link on my chrome (win7 64), and plays as well.

Well thank you for your help. I have a i7-6700(8gb ram), i5-3570(9gb ram), Lg G4 and Amd Phenom x6(12gb ram). All of them crash or stop working. Firefox only shows “loading 100%”. Opera gives the “out of memory error”, Vivaldi crashes showing a dead bird.

As I asked before would it be possible for me to get a refund to purchase your other audio player that does not use wavsurfer?

I was talking about desktop. Mobile browsers of course have less memory than desktop. I can suggest to generate your waveforms on desktop so they can be reused anywhere else. Refund is not possible in your circumstances.


using your example im missing the icons / play / fb /twitter etc..


Place unmodified files in empty directory on your server and provide me the link to your page.


SOLVED: i had my server set to https and when it loaded the font awesome css it was http. i think i have my chrome set to not load insecure docs when server is https. Does the wordpress version run independently on an html page by itself? BTW, great job on this. Do you have any plans on adding a counter?

Yes, if you use https, remove http from icons link:


We will add the counter in future updates.

Hello! Love this, thinking of purchasing. Only question is, will this perform well if I have an auto-generated playlist from a folder with upwards of 1000 + songs? Thanks.


1000 songs seems to much for one playlist in my opinion. I would suggest splitting this into playlists of 100 or so songs, and later use api to load new playlist on run-time if needed.

Hello, can you tell me how to read mp3 from the google drive. Sorry I’m not a specialist .. thank you very much

Really sorry but I can not … Can you tell me precisely or is the error?

OK, thanks !! do not work…


Do you support JSON data for the peaks (we convert on the server as part of our ingest process and store the json data in our db)

Wavesurfer appears to support this as pre-rendered peaks (https://wavesurfer-js.org/example/audio-element/ || https://wavesurfer-js.org/faq/), so it might be possible?

Yes, I will look at this in the next few days and make update if its simple.

Thanks for adding the feature in v1.3! Only just saw the update and purchased the plugin. Thanks again.


UPDATE 1.3 [23.3.2017]

 - [ADD] new method available for waveform creation (provide peak data array manually)
 - [UPDATE] updated help file

Hi there

I accidentally bought this version but I wanted the Wordpress version. Could you please refund me and I’ll pay the difference for the Wordpress version?

Thanks so much – it really looks like it will be perfect.


P.S. Does the Wordpress version also have the fixed bottom bar layout?


Wordpress version doesnt have fixed bottom layout. Its best to look a the preview demo for specific plugin to see what layouts are included: http://codecanyon.net/item/audio-waveform-player-with-playlist-wp-plugin/18586994

If the item hasn’t been downloaded the item we can issue a refund:


I’m using the podcast option of the player with Default Option 1. However, it’s only playing the beginning (a few seconds) of the podcast then goes to the next track.


Can you show me your page link?


We’re looking at using some of the WaveSurfer plugin options – mainly Regions. Not too sure if you want to include direct support for this or allow use to plugin to the wavesurfer instance used within AWP.

Example: http://codepen.io/katspaugh/pen/obmOXV Home: https://wavesurfer-js.org/plugins/regions.html

If you’re able to provide how the wavesurfer in AWP is defined the following code could work once adjusted to the right reference? (plugin JS included in header of course)

// Add a couple of pre-defined regions wavesurfer.addRegion({ start: 2, // time in seconds end: 5, // time in seconds color: 'hsla(100, 100%, 50%, 0.1)', loop: true });

Note: I don’t think that the modified Wavesurfer source code would break this plugin either.


Tean Author


Wavesurfer id defined in new.js file. Is this something you would want to extend the functionality with? The plugin also has start and end feature built in.


If it could be built in that would be great, or if documented about how to use it in the current form that would work just as well for us. The microphone plugin is on our radar as well so if it was possible to have documented someway to initialize and use wavesurfer plugins that would be awesome.

Regarding the start and end feature in the plugin: this indicates where the region starts and ends being shown on the waveform, it also allows for if loop: true, to loop over the region only, which is great for us to create loops for teaching purposes – we’ll use these for adding/linking written comments to highlighted regions for feedback.


Tean Author

If many people requests this feature, we will implement it into the plugin.


jimt1 Purchased

This comment is currently being reviewed.

How does it create waveform?



Tean Author


It creates it using Web audio api and then saves for late reuse every other time song is played.

Hi I just bought your very cool waveform player, and I would like to use the index_wall2.html page as a template for some of my music, but I want to host from the server and not use the soundcloud api. Do you have another html page that is like the index_wall2.html page. or how would I take out the soundcloud api code and replace it to look for a playlist or set of songs from from a hosted server?

Thanks, Bryan https://www.logicprohacks.com

Tean Author


You can create the same playlist with index_wall2.html using self hosted mp3 files. Just copy the playlist look from index_default.html example.

Thanks for the tip, I replaced the playlist from the index_default.html example, but also saw that I needed to make sure the “activePlaylist:” from the var settings was set to match the id “playlist-audio1” not the “playlist-soundcloud1” id and that did the trick.

Full screen/fixed player not working on the demo?


Tean Author


Not sure why, but I just noticed I dont have soundcloud application and more, so my api key is not valid. I have to register a new application and wait for new key: https://soundcloud.com/you/apps