Code

Discussion on ZoomSounds - Neat HTML5 Audio Player with Waveform and Playlist

Discussion on ZoomSounds - Neat HTML5 Audio Player with Waveform and Playlist

By
Cart 1,770 sales

ZoomIt supports this item

Supported

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

535 comments found.

Hello

We have an issue with short audio files on ios devices (iphone, ipad – safari and chrome). At first it plays fine, but when you hit play button again it sounds like there is a short fade-in on the audio file. Any help would be highly appreciated.

Thanks!

I am having a look today

Any updates on this issue? Thanks :)

No update at the moment :(

Good luck with your sales

How can I deactivate the waveform animation when you first load the page? ... It’s conflicting with imagesloaded.js Causing the waveform not to appear until you click play

Hello

Add this to your css

  body .audioplayer .scrubbar:not(.a), .zoomsounds-external-scrubbar.scrubbar-loaded .scrubbar:not(.a){
    opacity: 1;
  }
  .audioplayer:not(.skin-wave-is-spectrum):not(.a) .scrub-bg{
    transform: scaleY(1);
  }

Cheers!
Radu

Hello…did not work!

Show me a link _ I can take a look

Question… I’m having problems with the waveforms… The waveforms don’t load consistently I am rendering the waveforms manually using: examples/generate—waveform-render.php And then inserting the pcm data into the html… Is there a way to convert that pcm data waveform to SVG or PNG for it to be 100% reliable, consistent.. Thank you!

Hello

There is no way to use png at the moment. There was a way in the previous version, but we removed that.

Waveforms are saved in source/db/pcm{{PLAYER_ID}}.html

I am using azuracast to broadcast and when I put the source url as argument for data-source i get the stream but not the metadata: what can I do to get the info of the song being played + the DJ if available? Azuracast also provides an API but I am not sure how to use it…

We have no integration with azuracast – you would have to integrate those on custom development

Cheers!
Radu

Is there a way to duplicate the play button?. I saw the option of the texts” Play and Pause… but is there a way to place a play button some random place in the same page that toggles play/pause to control a certain palyer id? thank you

Hello

Try

/source/examples/unit-tests/itShould--playExternalPlayers-inFooter.html

it should contain what you need

If you want to trigger another player, just replace

data-fakeplayer=".dzsap_footer"

with

data-fakeplayer="your_player_selector"

Cheers!
Radu

Thank you

9d0880ca-d3a7-4602-874d-0dcc70717187 – 13 апреля 2021 Hello, the key you sent is not working.

Hello

Remind us of your issue please

Cheers!
Radu

Is there a sample file for the layout “Boxed Inside, Background Player” as presented here: https://previews.customer.envatousercontent.com/files/274338180/index.html?skinwave_layout_demo=demo5 ?

Thanks.

Hello

You can create it easily

[zoomsounds_player artistname="sample--boxed-inside" songname="song" config="sample--boxed-inside" type="detect" source="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"   autoplay="off" loop="off" play_in_footer_player="default" enable_download_button="off" enable_downloads_counter="off" download_custom_link_enable="off" open_in_ultibox="off" wrapper_image="https://zoomthe.me/tests/bg_blur.jpg" wrapper_image_type="zoomsounds-wrapper-bg-bellow"]

Cheers!
Radu

Thank you for the quick response. However, I should have specified that I am using the HTML5 version of the control (I presume the response provided is WordPress).

I am not having any luck guessing the correct transposition.

Hello

Made some examples for you under

source/examples/unit-tests/itShould--onePlayer--boxed-example.html

Download latest version

Cheers!
Radu

Hello,

Just bought your script and im about to implement it into a social media script and it seems i’ve figured everything out so far, i have only just one problem and now i’m about to figure out which approach i should take so i start here if you don’t mind.

So i have voice recording via audio in a chat window and the processing is in a template file (in the social media script) which uses the {/literal} expression for example:

{literal}{{#voice_note}}{/literal}
                               <audio class="js_audio" id="audio-{literal}{{id}}{/literal}" controls preload="auto" style="width: 100%; min-width: 100px;">
                               <source src="{$system['system_uploads']}/{literal}{{voice_note}}{/literal}" type="audio/mpeg">
                               <source src="{$system['system_uploads']}/{literal}{{voice_note}}{/literal}" type="audio/mp3">
                               {__("Your browser does not support HTML5 audio")}
                           </audio>
 {literal}{{/voice_note}}{/literal}

if i paste the DIV with the audiogallery below it just gives me an empty space after i submit the file via chat, i assume it’s because it doesn’t contains code with literal expressions.

Do you have an idea how or where i could start to solve this problem? Or does your script doesn’t work with literal expressions at all?

Thank you a lot in advance.

Hello

It depends

since you may be adding galleries asynchronously, you might need to initialise the gallery too

dzsag_init('.audiogallery.auto-init', {
      init_each: true
    });

Cheers!
Radu

Thanks a lot, the init was the missing puzzle piece

Hi there,

i’m looking for a “non-wordpress-exclusive” html5 player replacement, and i’m not able to use a player which requires a fixed ID (document.getElementById) since my ID’s differ dynamically and depends what and where a user makes an upload (via voice in my case) so the only chance to apply a player UI to <audio> would be only via classes in my case.

Looked now for a good week straight on stackoverflow but i had to pass since there are either just player replacements for static content or full libraries including video and with all the extra frills which would be a littlebit over the top for my needs.

How is it with the Zoomsounds player?

Thank you in advance :)

Additional question: I’ve removed all Jquery links from the audioplayer and inc folder since it conflicted with the jquery scripts which i have in my main scripts but i figured out there are also other jquery related strings in the scripts like

,i.src=t.O.URL_JQUERY,document.head.appendChild(i)}setTimeout((()=>{a(“error loading”)}),15e3)}))}().then((()=>{window.dzsap_settings||(window.dzsap_settings={})

in the audioplayer.sourcepack.js and audioplayer.js, should or can i also remove them to avoid empty queries or do they fetch globally (from an available jquery lib?)

Thank you in advance

Hello

We don’t have that option

We have the plan to separate playlist from player in the near future and that will cut half of the size though

Cheers!
Radu

Hi, it says that there was an update around the 28th of march 21, is there a changelog or maybe even upgrade infos i could look at?

Thank you in advance.

Hi, bought this item 2 days ago. First it took me awhile to understand if it was the html5 version or WordPress, and after buying this, the html5, there are WordPress files int the zip…

Then when trying to use check the examples, there are erros in almost all of them. I tought 404’s were just bad links, but no, there are many missing files.

Ex: index-fullwidth.html:8 GET (...) /codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/libs/bootstrap/bootstrap-responsive.css net::ERR_ABORTED 404 (Not Found) index-fullwidth.html:7 GET (...) /codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/libs/bootstrap/bootstrap.css net::ERR_ABORTED 404 (Not Found)

Directories not found: index-fullwidth.html:16 GET (...)/codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/examples/dzsparallaxer/dzsparallaxer.css net::ERR_ABORTED 404 (Not Found) index-fullwidth.html:18 GET (...)/codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/examples/dzstooltip/dzstooltip.js net::ERR_ABORTED 404 (Not Found) index-fullwidth.html:406 GET (...)/codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/examples/dzsparallaxer/dzsparallaxer.js net::ERR_ABORTED 404 (Not Found) index-fullwidth.html:16 GET (...)/codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/examples/dzsparallaxer/dzsparallaxer.css net::ERR_ABORTED 404 (Not Found) index-fullwidth.html:18 GET (...)/codecanyon-eW5O7GR1-zoomsounds-neat-html5-audio-player/source/examples/dzstooltip/dzstooltip.js net::ERR_ABORTED 404 (Not Found)

And javascript errors (maybe from the missing files):

jquery.js:2 jQuery.Deferred exception: aux_opts is not defined ReferenceError: aux_opts is not defined

Can you please add a zip file with the corrections please. Thanks

Hello

Thank you for reporting these

Fixed in that file

Cheers!
Radu

Hello again – Has the waveform generation routine changed? We used to send the pcm data to a “publisher” file that would store the pcm data in a cache file for pulling back later, saving processing time on subsequent loads. But it seems like now, even though that pcm data is being sent to that publisher file, and the data is in fact still being sent to a file for later use, the script continues to behave like it’s the first load even on subsequent loads, so the cache isn’t being used. Makes the loading time for the wave image consistently very slow, especially on longer audio files.

Hello

Yes, it has changed, we no longer make an ajax call in case it’s not present, to scrub the database. We just search for it and page render time

Example in source/examples/unit-tests/itShould-onePlayer-generatePcmOnPrerender.php

basically you need

 <?php
          if (get_pcm($playerId, $source)) {
            echo ' data-pcm="' . get_pcm($playerId, $source) . '"';
          }
          ?>

Cheers!
Radu

Ok. Got it. Thanks for the help as always.

Thank you!

Hi, i having issue with iPhone on iphone the player not working at all even your samples file i am trying without any change. here is sample page please let me know what should i do ? https://ilyrics.org/audio/source/examples/index-gallery-skin-aura.html

Hmm

Try the latest version now

Replace the audioplayer/ folder and clear browser cache

Cheers!
Radu

Hi – getting an error on ios “ReferenceError: Can’t find variable: margs”. At line 192 in /audioplayer/jsinc/media/_media_functions.js we see this code where margs seems to be undefined maybe?

if (dzsapHelpers.is_ios()) { if (margs.called_from === ‘change_media’) { stringAudioTagOpen += ’ autoplay’; } }

OK. NVM. Just managed to get 6.19. Will report back when it works.

All good. Works now. Took a bit to figure the new skins implementation but seems 100% now. Thanks!

Hello

Yes, this is an optimization so we don’t load unncessary assets

You can find examples in source/examples/skins

So what needs importing now is

<link rel="stylesheet" href="./audioplayer/parts/player-skins/player-skin--skin-{{SKIN_NAME}}.css"/>

Cheers!
Radu

I’m trying to install your plugin on my WordPress but it does not work! can you help me, please?

Hi, the player does not appear on iPhones. What can we do?

Hi Radu Have you tested the html? Are there any errors in my code? I inserted it like the example in > readme > index.html

Hello

Try the newest version

Replace audioplayer/ folder

Clear browser cache

Cheers!
Radu

Hi, works perfect now – thanks!

I’ve recently updated to 6.00 from 5.20. I’m noticing there’s a small icon in the upper right of the skin-wave skin that seems to activate the tooltip container. I’m not sure how to turn that off. I’ve set skinwave_comments_enable to ‘0’ on a hunch but that doesn’t seem to do it. I can certainly make it go away with the CSS, but I’d rather not fudge it that way. Would be far better to use the proper configuration if there is one. Is there one?

So… good news. It fixed itself. Turns out since I was working in my development site, where I don’t keep many of the tens of thousand of audio files that we store, I was missing most of the audio files for the players with that “i” icon. I didn’t realize it was an indicator of a missing file, as I’d never seen it in that case previously. Anyway, it went away as soon as I made the file available. Thanks anyway.

Also – I wanted to mention that we’ve been using your player since 2015 (I think we started with v2?) and have been very happy with it. Thank you.

Hello

Nice to hear from such a long customer. Thank you for the feedback. Please rate 5/5 – features and updates are coming consistently

Cheers!
Radu

Hi there, I have a question about generating waves from mp3. The problem is when the audio file is too big. For example, a 1-hour audio file is too big to download to memory to generate waves from it. Wavesurfer is time outing and even if I change WAVESURFER_MAX_TIMEOUT: to 2e9, the file is still too big for mobile devices. I found that wavesurfer project has a solution for big files. : https://wavesurfer-js.org/faq/ It is possible to generate wave data with audiowaveform app on the server and fetch those data from .json file to wavesurfer instead of generating it from the media file. I think it would be great to have the possibility of attribute like wavedata-source for .json file and skip downloading mp3 for the wave generating in case the .json is present.

Would you give me a tip on how to implement that fetching right now? Or at least how to stop the downloading and generate the waveforms and keep only those fake ones until the problem is not solved?

Thank You!

Buna! Youcan bet your last money that I want to! :-)) Thank you in advance!

Hello

Check the example in source/examples/unit-tests/itShould--onePlayer--generatePcmOnPrerender.php What you should note there the audioplayer element should have

 id="<?php echo $playerId; ?>>"

data-options should have a reference to the publisher.php – you can adjust the path accordingly

data-options='{
"autoplay":"on",
"settings_php_handler":"../../inc/php/publisher.php" 
}'

them after that, make sure the data-pcm attribute is rendered from the playerId

          if (get_pcm($playerId, $source)) {
            echo ' data-pcm="' . get_pcm($playerId, $source) . '"';
          }

Cheers!
Radu

I’ll check it. Thank you! I have to admint it was my fault. Later I have discovered a logfile where I found the player is trying to write into db folder which I didn’t create. :-O So I made that folder and players are storing wave data there now.

Hello, What is the difference between dzsap_init and dzsag_init? Why can’t I access the api_change_media function when I start with dzsag_init? Do I have to indicate any parameters?

Do you have any more extensive documentation than the one provided at https://digitalzoomstudio.net/docs/wpzoomsounds/?

Hi Radu, how do I start the player after starting the gallery (dzsag_init)?, To have the api_change_media function available.

Attached my code:

Carl cox
Revenge Carl cox Revenge Boys Noize
Revenge Boys Noize Revenge <script> jQuery(document).ready(function ($) { var settings_ap = { disable_volume: ‘off’ ,disable_scrub: ‘default’ ,design_skin: ‘skin-wave’ ,skinwave_dynamicwaves:’on’ }; dzsag_init(’#ap1’,{ ‘transition’:’fade’ ,’autoplay’ : ‘on’ ,navigation_method:’legacyscroll’ ,skinwave_mode: “small” ,design_menu_position:’bottom’ ,embedded: ‘off’ ,enable_easing: ‘on’ ,force_autoplay_when_coming_from_share_link:’onf’ ,design_menu_height: 200 ,design_menu_state: ‘closed’ ,design_menu_show_player_state_button: ‘on’ ,’settings_ap’:settings_ap }); }); </script>

Hello

That function is available after the player has been inited from the gallery

\\

Also the play function and the others

Cheers!
Radu

Does the player reads and displays artist and title from an icecast stream?

Hello

Yes

Cheers!
Radu

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey