Discussion on Audio Waveform Player with Playlist

Tean

Tean supports this item

Supported

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

80 comments found.

hello, how to show time hour and minutes instead of only minutes. Thank you

Hello!

This would require some code modifications.

Inside new.js fle you will have to modify following functions:

formatCurrentTime, formatDuration

Hi,

So I’ve added the links to facebook, twitter, instagram and google +. I seem to have a problem with instagram, google + and possibly twitter. They come up with “a broken link” or the page is not valid. Facebook seems to work just fine. Not sure if there are any other particular requirements for these other sites.

Below is the code from the “new.js” file related to those links:

if(type == “facebook”){ path = prefix+’//www.facebook.com/sharer/sharer.php?u=’+encodeURIComponent(url); if(window.FB){ getFbSdk(url, thumb, title); return; } }else if(type == “twitter”){ path = prefix+’//twitter.com/share?url=’encodeURIComponent(url)‘&text=’+encodeURIComponent(title); }else if(type == “instagram”){ path = prefix+’//instagram.com/share?url=’encodeURIComponent(url)‘&text=’+encodeURIComponent(title); }else if(type == “googleplus”){ path = prefix+’//plus.google.com/share?url=’+encodeURIComponent(url); }else if(type == “tumblr”){ path = prefix+’//www.tumblr.com/share/link?url=’encodeURIComponent(url)‘&name=’encodeURIComponent(title)‘&description=’+encodeURIComponent(description); }

The test website is www.gslproductions.com/gsl development/indextest.html

Then select the “music” button to see the player.

Thanks for your help.

You are using file names with spacing (data-share, data-mp3). You cant have spacing in file names (example: goaway short.mp3)

Also you can update to latest version which will make data-share links automatic from data-mp3 attribute so you dont have to manually add data-share if you dont want them different than original mp3 file.

Hi,

I submitted a question the other day regarding issues with adding Instagram to my test website and with the others like google plus, twitter, etc. I keep getting location not found when I open all but facebook.

The test site is www.gslproductions.com/gsl development/indextest.html

I would appreciate some help. I’m fairly new at all of this.

I see that there are a few different types of calls for those sites like twitter passing test and tumbler passing name:

“twitter”==a?q=d+”//twitter.com/share?url=”encodeURIComponent(b)“&text=”+encodeURIComponent(g)

“tumblr”==a&&(q=d+”//www.tumblr.com/share/link?url=”encodeURIComponent(b)“&name=”encodeURIComponent(g)“&description=”+encodeURIComponent(t))

What are the requirements for Instagram?

Also, what is the best url address to pass along to any of these sites so they will recognize that attachment?

Thank you

e

I answered you above that you need to remove spaces from your filenames, because I think this could be the issue.

There is no instagram share in this plugin. You could try searching for some examples on google.

Is it possible to send a media link from my website to Instagram?

I have the following in the html:

and

“instagram”==a?q=d+”//instagram.com/share?url=”+encodeURIComponent(b):

in the “new.js” file.

I keep getting “sorry this page is not available.” I can see the address as “https://www.instagram.com/share/?url=www.gslproductions.com%2Fmp3%2Fwhateveritis_short.mp3” in the Instagram link.

The actual path for this is www.gslproductions.com/mp3/whateveritis_short.mp3

Please advise on this issue.

Best regards,

Evan M. Test site: http://gslproductions.com/gsldev/indextest.html#

Hello!

There is no instagram share in this plugin.

mrhea00

mrhea00 Purchased

Hello, I’m having some issues using the folder read method. When using the folder source, it reads and displays the titles of the tracks in the folder, but it doesn’t play and the waveform section shows Loading 0%. I noticed that the generated download link path is also incorrect due to a missing ”/” between the domain and the start of the path (domain.comfiles/music) instead of (domain.com/files/music) Could these things be related? I’m assuming its a syntax issue in the new.js file. Any help would be appreciated.

Hello!

Can you send a message at http://codecanyon.net/user/Tean#contact with a link to your webpage so we can have a look at the issue.

Thanks

moziee

moziee Purchased

Hi – bought this product to use the default display with wave showing. I intend to use multiple playlists on the one page. Do you have an example of this working that you could send? I’m not quite sure how to get it working. Thanks!

Kind Regards Malc

Like this if you used mult1 and mult2 as instanceNames

if(instanceName == 'default' || instanceName == 'default2' || instanceName == 'default3' ||  instanceName == 'default4' || instanceName == 'poster' || instanceName == 'mult1' || instanceName == 'mult2'){
moziee

moziee Purchased

Hi – just got that working – thanks! Finally just need to create image files for the mp3 – checking that now. Malc

moziee

moziee Purchased

Just to check – I’m assuming from your help pages that all I have to do is call procedure with awp-playlist-item to create a peak file that will then be used to display the wav. However I’ve removed the existing png wav image files are no new ones are being created. what am I doing wrong? Thanks! Malc

How enable footer player?

how can i use player with out playlist. because i want to show multiple players inside grid for each audio.

i want to use multiple players but with out playlist like https://www.audiomack.com/ how can i do that please help

You will need to know jquery/php and the rest to do such code modifications.

Using this script, is it possible for the server to generate peak data arrays after an MP3 file is uploaded? I’m working with big MP3 files, and using the examples on wavesurfer-js.org can sometimes cause the browser to hang and often crash due to the long waveforms being generated client side, but if I’m able to generate the peak data from the server side, save it, and import the array when loading the player, this should stop the player from hanging or crashing. Is this a feature that is built into this script?

Hello!

Wave can be created if you can supply peak data array to the plugin yourself.

Otherwise plugin can create wave from mp3 file but this can be limited in large file sizes like you mentioned.

Do you have a PHP plugin that can do this?

No, sorry.

Hi,

I have the follwoing questions: 1. The progress color is still blue, in default4 it is white. How can i switch it to white? 2. How can i change the color of the progress bar? php-waveform-png.php gave many failures. is there a generator, where i can upload a file, set the output colors an get back the png files?

Thanks Michael

1. cursor color is in css:
.awp-waveform-img-progress-wrap{
    border-right: 3px solid #0000ff;
}

2. why dont you remove data-peak-load and data-peak-progress so it can use web audio api to draw waveform?

How are you using it and what failures do you get?

php-waveform-png.php gave many failures

Thanks for your massage. I dont want to user web audio api, because peaks need to be loaded every time again. I offer a longer podcast, that should start immediately. Is there a possibility to write us non-public via e-mail?

Here are the failures of php-waveform-png.php: Warning: unlink(1947b5b77b.mp3) [function.unlink]:

No such file or directory in /source/image_wave_create/php-waveform-png.php on line 90

Warning: fopen(1947b5b77b.wav) [function.fopen]: failed to open stream: No such file or directory in /source/image_wave_create/php-waveform-png.php on line 110

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 112

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 113

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 114

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 115

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 116

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 117

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 118

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 119

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 120

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 121

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 122

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 123

Warning: fread() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 124

Warning: filesize() [function.filesize]: stat failed for 1947b5b77b.wav in /source/image_wave_create/php-waveform-png.php on line 137

Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in /source/image_wave_create/php-waveform-png.php on line 146

Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in /source/image_wave_create/php-waveform-png.php on line 147

Warning: imagesavealpha() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 152

Warning: imagecolorallocatealpha() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 153

Warning: imagefill() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 154

Warning: imagesavealpha() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 156

Warning: imagecolorallocatealpha() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 157

Warning: imagefill() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 158

Warning: feof() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 167

Warning: fclose() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 234

Warning: unlink(1947b5b77b.wav) [function.unlink]: No such file or directory in /source/image_wave_create/php-waveform-png.php on line 237

Warning: imagesx() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 250

Warning: imagesy() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 250

Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 250

Warning: imagesx() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 251

Warning: imagesy() expects parameter 1 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 251

Warning: imagecopyresampled() expects parameter 2 to be resource, boolean given in /source/image_wave_create/php-waveform-png.php on line 251 Finished making wave files!

No, peak file only needs to be created only once, after that it just loads the same peak which is fastest method. You can see peak files in peak directory if they have been successfully created.

Are you running php-waveform-png.php on server?

No, peaks are not saved in peak directory. I can see them only in html. the directory has 755. yes, i run the php-waveform-png.php on server. Thanks.

Yes peaks are created with normal files name characters. But i need german mutades vowels inside of data title, if the peak is created out of it. Could you plaese provide this? Thanks.

This would require new parameter for data-peak name. Since there is no backend in this plugin, there is no way to save peak name, and title is used. I will see if I can improve this in next update.

Thanks, that would be great!

One more thing: if i use the code für podcasts the player is not shown anymore. What exactly makes the difference between audio and podcasts? Thanks.

This is not a podcast, this is an self hosted mp3 file, so you need to use data-type audio

media/audio/weihnachtsmaerkte.mp3

You can clearly see podcast example in help documentation.

ok, when i call the podcast url, i see that here an xml file is meant.

Is it possible to create XML data from playlist to get something like this: http://www.kingola.com/feed/podcast/ ?

This is a podcast rss feed, if you create this externally you can load this into the player.

Thanks! I put an audio podcast here, but no waveform is loaded: http://www.demo-shop.org/audioplayer/content/weihnachtsmaerkte3.html

Did you recieve my e-mail?

Yes I have, you have sent it 8 hours ago.

Hi there,

I purchased this last night to inject in my page cloud website and it does not seem to work. The instructions are extremely limited for someone of my level. Are there more detailed instructions available?

Hello!

You should follow help documentation and demo examples included in the package.

If you still have problems, provide me with your website link so I can have a look.

Thanks

Hi, I purchased this item as i required a plugin that would display a visualization for an audio stream on a web page. This does not seem to do that, ? unless i am mistaken. This seems to require a pre generated peak file, is there any way of getting this to run with an audio stream?

Hello!

This plugin will create peak file from provided audio file. So if you provide self hosted audio mp3 file, it will create waveform visualisation.

Hi Im interested in Audio Waveform Player with Playlist. Is this a 1 time 28usd or yearly? Plus I’m very new to web design I use Everweb if I buy this will you be sending me code to plug into it?

Hello!

This is one time license.

https://codecanyon.net/licenses

Unfortunately I am not familiar with Everweb.

A question pre-sale. to avoid same mistake, my player can t read songs with any special carater in the title like &, what about yours ? second when uploading a playlist from folder can it get the full tag including the album pic ?

thanks

Tean

Tean Author

Special character should be avoided because title is used for storing peak names. This is on our update list when we allow special characters.

Fort he folder reading, it uses mediatags so if they can parse album tags successfully it will work.

Where i can find the installation process for wordpress

i purshaced the wrong plugin the audiowave but not the one for wordpress, can you trade before i ask a refund from envanto

Dada04

Dada04 Purchased

Hi,

seems there is a bug with autoplay using Safari. See this example: http://www.interactivepixel.net/env/awp/index_default3.html

After both, finishing page-load or selecting a song, the song doesn’t start, even though the pause-icon is shown. When clicking on the pause-icon the song starts.

I tested with Safari 11.0 (13604.1.38.1.6) on MacOS and with Safari on iOS 11.0.3. Will that be fixed?

Tean

Tean Author

Thanks fro the info, I have read through the text. I dont have high sierra now, however even if you encounter this, you should still be able to press pause, then play and the audio should start?

Dada04

Dada04 Purchased

Yes, when pressing pause, the audio starts. So this is not a major bug, but the wrong icon in this case is a bit confusing.

Tean

Tean Author

I have updated mac os now. From what I can see this is wavesurfer issue because it doesnt happen here: http://interactivepixel.net/env/hap2/api.html (autoplay is true)

by
by
by
by
by
by