Discussion on ZoomSounds - Neat HTML5 Audio Player

ZoomIt

ZoomIt supports this item

Supported

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

258 comments found.

Need help with getting comments to show up.

Here’s my HTML and Script -

 

<script> var settings_ap = { disable_volume: “off”, autoplay: “off”, cue: “on”, disable_scrub: “default”, design_skin: “skin-wave”, skinwave_dynamicwaves: “on”, settings_useflashplayer: “auto”, skinwave_spectrummultiplier: “4”, skinwave_comments_enable: “on”, skinwave_mode: “small”, skinwave_comments_retrievefromajax: “on”, settings_php_handler: “{{ asset(’’)}}assets/plugins/bower_components/audioplayer/publisher.php”, pcm_data_try_to_generate: “on”, pcm_data_try_to_generate_wait_for_real_pcm: “on” }; jQuery(document).ready(function($) { console.info($(”#ap1”)); $(”#ap1”).audioplayer(settings_ap); }) </script>

Try to use latest audioplayer.js

it works with latest audioplayer.js – http://digitalzoomstudio.net/tests/zoomsounds/sups/sup-replayvr.html

Cheers
Radu

That did the trick! Awesome! Thanks. (Also, I had an issue with my comments format. When i used a different class for the-avatar, it would not display)

For the moment the the-avatar class must be used . You can customize on top of that.

hi Im having a problem with the WAVES , on my website on tabs (below slider ) problem appear when change between tabs ) waves shape changed -become a petition and fewer link http://alshathri.af.org.sa/

Send me message via my profile

I can send you an update

Cheers
Radu

i sent to you a message via your profile before one day !! nothing ?

Yes I replied to o.jallab – af.org.sa

Hi, I am trying to load songs from url queries, and I only have one player id ‘ap1’, however cannot make it work, here is my code, please help: <script> jQuery(document).ready(function () { var settings_ap = { disable_volume: ‘off’ ,disable_scrub: ‘default’ ,design_skin: ‘skin-wave’ ,skinwave_dynamicwaves:’on’ ,skinwave_comments_enable:’on’ ,settings_extrahtml:’ {{heart_svg}} Like Liked {{get_plays}} {{get_likes}} ‘ }; dzsag_init(’#ag1’,{ ‘transition’:’fade’ ,’autoplay’ : ‘on’ ,’settings_ap’:settings_ap }); </script>

$('.scroll').jscroll({
        autoTriggerUntil: 3
    });
});
var query = getUrlParameter('data');
var audioObj = JSON.parse(query);
$('.the-artist').text(audioObj.authors);
$('.the-name').text(audioObj.name);
$("#ap1").api_change_media(audioObj.playURL,
    {
        type:"audio",
        fakeplayer_is_feeder:"off" 
        ,artist:audioObj.authors
        ,song_name:audioObj.name
        ,autoplay:"off" 
        ,thumb:audioObj.imageURL
        ,scrubbg:"waves/scrubbg.png" 
        ,scrubprog:"waves/scrubprog.png" 
        ,pcm:"[0.1,0.2,0.3,0.2,0.1,0.23,0.12,0.21,0.112,0.12,0.6,1,0.1,0.2,0.3,0.2,0.1,0.23,0.12,0.21,0.112,0.12,0.6,1]" 
    }
);
$(".audioplayer-tobe").api_reinit();
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
};
for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');
}
if (sParameterName[0] === sParam) {
    return sParameterName[1] === undefined ? true : sParameterName[1];
}

Can you show me a link ?

Code does not help much

Cheers
Radu

please go http://overseafm.com/overseasfm_web/html/player/playertest.html , the button on the page will forward user to player.html with json string in the url

You need

,settings_php_handler:"publisher.php"

For any dynamic data to go in ( like likes or views )

hello

j’ai un petit probleme avec le player audio, quand j’arrive sur ma page et que je charge une musique dans le player, je ne vois pas les WAVE SURFER, c’est blanc … ! je parle du player footer.

Un petit coup de main serait avec grand plaisir !

Merci

Hello

Can you show me a link ?

I need to check your settings

Cheers
Radu

Aldaawah

Aldaawah Purchased

still when change between tabs there is problem with waves lppk like this https://screenshots.firefox.com/YtGq2P69Esg4JjeB/godian.af.org.sa

my website links http://godian.af.org.sa/ar ?

Aldaawah

Aldaawah Purchased

i solve that , i have another issues take a long time , How to add scroll to top or to #ID so when click on any item on list go to player section , i try scrollTo but not work here the list http://godian.af.org.sa/ar/ftawa

Hello

The only option is to modify

audioplayer.js line 11334

function goto_item(arg, pargs) {

and place inside the function the code to scroll based on the item selected

__

You can also have a function to go there

<script>
jQuery(document).ready(function($){
$(document).on('click.custom','.menu-item',function(){
$(window).scrollTop(0);
}
});
</script>

Cheers
Radu

Hi,

I am trying to get (skinwave_enableSpectrum: ‘on’) to work with my SHOUTcast stream. However it only appears to work with static MP3 files.

Is there anything I can do to make my player support Spectrum for SHOUTcast streams?

Thanks!

Anthony

Hello

Live spectrum analyzer only works with self hosted mp3.

Cheers
Radu

Aldaawah

Aldaawah Purchased

scrollTop

Great product! Works perfectly but I’m not getting the events firing in GA. I do see the page load there though with the GA code loaded in the head, and this before the close of the body tag:

dzsag_init(’#ag1’,{ ‘transition’:’fade’ ,’autoplay’ : ‘off’ ,google_analytics_send_play_event: ‘on’ ,’settings_ap’:settings_ap }); });

My player ID is this:

Here is a link to the page: http://prototype.watchthinkvote.com/zoom/

Hello

google_analytics_send_play_event is a option for audioplayer, not gallery.

So you must include that attribute in settings_ap object

Cheers
Radu

Dev707

Dev707 Purchased

Occasionally, we are finding that your audio player plugin is loading a “error – file does not exist” message that you can see here: https://www.screencast.com/t/7g6hf2B4trz

Since this is only occasional, and sometimes for certain users and not others, we’re trying to troubleshoot it and it’s challenging to do that.

Here are my questions for you: 1) Have you seen this error before, and if so, did you find the reason for it?

2) Is it possible that the player might interpret special characters in a file name the wrong way? Is it possible that could be creating the error in CERTAIN situations?

Hello

I need a real link to see the configuration .

It’s usually a server error. Try to access the mp3 directly when it happens to see if it works

Cheers
Radu

bgagic

bgagic Purchased

Hi, i have problem with player in Safari 11. “error-file does not exist” Works ok in Firefox and Chrome. It was working ok in previous version Safari 10 preview page: http://www.boxlab.eu/viewer/vbid-c114e7e7-ojqdlra3 any suggestions? thnx purchase code: 327e3c64-63a0-4eee-9517-5c1e95ee3f23

Hello

Send me a message via my profile I can send you newest update we can test with that https://codecanyon.net/user/ZoomIt

Cheers
Radu

a5r

a5r Purchased

hi, nice to see you’re now into the wave visualisation close to soundcloud’s. but a bug be occured: if you reload the page while hit “F5”, you can see: the same song will always have another new rendered wave. it is not always the same unique wave form from the same music track. I hope you can find this bug. would like to use it. looking forward

Hello

Wave generation should be consistent if you use publisher.php to save and retrieve the pcm data.

As long as the data is saved for a specific id, it should be retrieved the same every time.

You can also add

,pcm_data_try_to_generate_wait_for_real_pcm: 'on'

To the player options to make sure it always waits for real pcm data

Cheers
Radu

a5r

a5r Purchased

thanks, i tried to change some values in our code but it have no effect. still random wave forms. i don’t wanna rewrite the whole sound- and wave generation code, so i keep the normal one. but thanks for the information on how to use.

elvisish

elvisish Purchased

Love your player! I’m trying to get gapless playback between songs, is this possible at the moment? The album I’m using is seamless and it would be great if the tracks could start immediately without any pause or seam?

ZoomIt

ZoomIt Author

Hello

Try to clear cache

It plays with no delay for me , I can make you video if you wish

Cheers
Radu

Yes please, could you show me? Thanks!

elvisish

elvisish Purchased

One more question! How difficult is it to restructure the css and html to be truly responsive? There’s some mixed usage of css and html sizing tags in the script and the css, and when resizing the player, it doesn’t elegantly shrink as well as I’d like (the site I’m using it in uses vh/vw and em for sizing, so everything is sized relative to the screen.) How many adjustments would I have to make to get all the player buttons, waveform, albumart and song titles to be truly responsive?

Can you show me a link ? Of your implementation

So I see better your configuration

Because we have a different responsiveness for each skin

Cheers
Radu

elvisish

elvisish Purchased

If you have a look at http://www.djsabrinatheteenagedj.com you can see the site elegantly folds down if you resize the window, but the player elements doesn’t collapse as well. I used vw amounts for most elements but the player uses percentage and px. Which parts should be changed to get the player to fold nicely?

You could convert every element to vw. for example

   body  .audioplayer.skin-wave .ap-controls .con-playpause{ width: 5vw;
    height: 5vw;
    flex: 0 0 5vw; }

But this is not really conventional responsive – for example the sidebar does not collapse under the content etc.

Aldaawah

Aldaawah Purchased

How can add download button link inside player “near play icon” ?!!

Aldaawah

Aldaawah Purchased

hello i put download bottom now above player i want it inside show here http://godian.af.org.sa/ar/ftawa

Aldaawah

Aldaawah Purchased

؟!

Hello

You need to wrap your code in

 <div class="feed-dzsap-after-playpause" />

example :

<div class="audioplayer-tobe gotop" style="width:100%; " data-videotitle="هل يحفظ سبب النزول بالنص" data-thumb="http://godian.af.org.sa/sites/default/files/default_images/ftwae.jpg" data-source="http://godian.af.org.sa/sites/default/files/2017-09/f28.mp3   ">

                                                            <div class="feed-dzsap-after-playpause"><span class="dwnloadit"> <a href="/sites/default/files/2017-09/f28.mp3" class="btn-zoomsounds" target="_blank">
<span> تحميل</span>
<i class="fa fa-download" aria-hidden="true" />
 </a></span></div>

                                                            <div href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'slow');  return false;">
                                                                <div class="meta-artist"><span class="the-artist">هل يحفظ سبب النزول بالنص</span><br />
                                                                    <span class="the-name"> </span></div>

                                                                <div class="menu-description">
                                                                    <div class="menu-item-thumb-con">
                                                                        <div class="menu-item-thumb" style="background-image: url(http://godian.af.org.sa/sites/default/files/default_images/ftwae.jpg)">
                                                                        </div></div>
                                                                    <span class="the-artist">هل يحفظ سبب النزول بالنص</span>
                                                            </div>
                                                        </div>
                                                    </div>

Cheers
Radu

Aldaawah

Aldaawah Purchased

here http://alshathri.af.org.sa/audio/all still i have one problem not solved url of page is with three level like (web.com/age1/arg2 ) , wave disappear for the top item , and when played any item and also Disappear when play any item for the second time from list in my website here work fine http://alshathri.af.org.sa/ftawa but here there is that problem http://alshathri.af.org.sa/audio/all I think that’s because of URL how can solve it

Hello

Yes, you need to link to crrect link publisher.php

That link does not exist – http://alshathri.af.org.sa/audio/publisher.php

You need to link to the correct path in settings_php_handler

Cheers
Radu

SMPLE

SMPLE Purchased

Hi, how canvas works in the player? Does it generate a php file? Why, after updating the page, the wave of the player changes and is always different? Where is the new wave stored?

ZoomIt

ZoomIt Author

Waveform Generator

With New Canvas Mode – After mp3 is loaded, the waveform will be generated automatically – this will happen only once and then will be saved into the database – so further playings of the mp3 will read from the saved generated waveform instantly

Comments do not save / waveforms do not save

To access the database you will need to have a php server. If you already have one, then all that zoomsounds needs is the location of publisher.php . That file handles retrieving and publishing comments / waveforms . If publisher.php is in the same folder as the html just input

,settings_php_handler:'publisher.php'
in the player settings. Otherwise, point to the correct location.

For waveform generation also make sure

,"pcm_data_try_to_generate":"on"
is in the player settings. For waveform generation also make sure
,"skinwave_comments_enable":"on","skinwave_comments_retrievefromajax":
"on"
is in the player settings.

__

Cheers,
Radu

Hi. The Your pluggin, can used local files ?

Hello.

How can I integrate VAST (Video Ad Serving Template) in your audio player? Is it even possible?

by
by
by
by
by
by