Advanced Audio Plugin Bug

[projectmuse.dev]

There seems to be a bug in the advanced audio player plugin that makes it impossible to make invisible. As far as appearance, I am trying to copy appearance of the plugin in the demo:

However when I place the exact same color and transparency level into the plugin it results in going completely black or this:

It seems to be impossible to make the player white or transparent. This greatly inhibits the design features of the plugin and is the reason I am currently using a different audio plugin. Since the plugin can be fully controlled with workflows and dynamic features (Play, Pause, Skip, Audio duration etc… Everything except for the progress bar which must remain visible), there must be a way to hide the background of the player as you guys did in the demo so we can have more control over the design!

[Kirill]

Hello @projectmuse.dev

Thank you for reaching out.

Can you please provide the screenshots of the plugin’s element settings(color, background), and also the color settings of the group? I would like to advise you to make sure that you have the following settings for the plugin’s element:

And the group settings are like this:

Please let me know if the issue still persists with these settings.

Looking forward to your reply.

[projectmuse.dev]

This is the results with those settings.

[projectmuse.dev]

[Kirill]

Thank you for providing additional information @projectmuse.dev

Indeed, there is a problem with the color and transparency of the player. We’ll fix the issue and roll an update in the upcoming days, as soon it is done I will get back to you

Please let me know if you have any other questions.

Have a nice day.

[Kirill]

Thank you for your patience @projectmuse.dev

The issue with the color on the control bar has been fixed. Please update to Version: 1.33.0, and let me know if it works well

Also, let me know if you have any other questions.

Looking forward to your reply.

[projectmuse.dev]

Wonderful thank you!

Yes, I have noticed another significant difference between the demo you guys provide and the actual plugin. In the demo editor, you are able to set the data source of the group that the audioplayer lies within, to the audioplayer’s song, like the audioplayer is acting as an input. However, I am unable to do the same thing. With the exact same setup as the demo, I cannot set the data source of the group that holds the audioplayer to the audioplayer’s song. This is obviously critical for many reasons like displaying the current data of the song such as title and cover art, and having the ability to play from a list of songs and that data change appropriately. Here are some screenshots:

[projectmuse.dev]

As you can see, neither the group, nor floating group that holds the audioplayer is able to use the audioplayer as a data source unlike the demo:

[projectmuse.dev]

[Kirill]

Apologies for the late reply @projectmuse.dev

The data source you are setting for the group is not for the audio player itself, it is for the page name. On the demo page, it is set to audio player’s song, because the name of the page is the audio player.

See the example in the screenshot below. The name of the page is kv1 and it takes the page name as the data source in this case and it uses a custom state which is set to kv1 whole page.

Please let me know if you have any other questions.

Take care.

[projectmuse.dev]

So I implemented the custom states (the only differnece between this workflow and the demo workflow is the action to show the floating group which contains the audioplayer):

Likewise, I now have the data flowing just like the demo:

However, when I trigger the action, this comes up:

I have (as far as I can tell) copied the workflows from the demo exactly. Do you have any idea why this error message is showing up, or where I have gone wrong?

[Kirill]

The demo page is just an example of the setup you can have. It depends on your use case, from the screenshots you have provided it is not clear what exactly you are trying to do. When you are setting up the custom state named “index” please make sure that you use a number and not a text, right here: Screenshot by Lightshot. Also, please make sure that the data source is the name of the page with a custom state.

The customizations that are done in the workflows might be a reason for getting an error, also it depends on how you set up the database. Please carefully analyze our demo page again to see all the actions and the settings in the database.

Please let me know if you have any other questions.

Take care.

[projectmuse.dev]

I have figured out the cause of the error message. It is nothing wrong with the workflows or settings. It appears if the group that the audioplayer is in is not visible on page load.

Set the group that contains the audio player to “not visible on page load” then add in the “show element” action before the"play audio player" and “set state” actions and you should get the error message.

Can you replicate this on your end?

[Kirill]

The audio player has to be visible on the page to play the audio, otherwise, the error will occur. The issue might be that you are not showing the group itself on the page and therefore get an error, or there are additional custom states that cause the problem.

Unfortunately, the issue still does not reproduce on our side and it is not possible to say what might be the problem without the full picture of your setup(if different from our demo page), and your exact use case.

Looking forward to your reply.

[projectmuse.dev]

Audioplayer Bug Demonstration.

Here is a page I built and a screen recording of a clear explanation of the issue.

I understand that the player cannot play if it is not visible. However, even dividing the workflow into two, creating two workflows for clicking the same shape, one for showing the element, and the other for playing the audio player, like so:

1. When shape B is clicked, show floating group
2. when shape B is clicked, play audio player → set state…

still results in the error. This makes it seem impossible to both show the audioplayer and play the audio with only one click/workflow. Instead, if you wish for the audioplayer to be hidden on page load, you would need to click one button to show the audioplayer, and another to play it. Which seems like it should be unnecessary, and leaves the user with no choice but for the audioplayer to always be visible…

What I need, is for the audioplayer to appear, and play upon the user clicking a song from the list of songs. But the error messages makes this impossible.

[fajayi39]

Hey, When i use the audio player to play audio files from my laptop it works, and i’m able to hear the audio output.
However, when i test out the same functionality on my iphone and i press the play button on my audio player, I don’t hear any output sound?
Here’s my application site to see: Bubble | No-code apps

But when i insert the same link into my iphone’s safari browser and attempt to play the audio file, I don’t hear anything

[Kirill]

Thank you for the video recording @projectmuse.dev, it has clarified your use case!

The error comes up due to the Bubble’s functionality, not the bug of a plugin. The action “Play from index Audioplayer desktop” starts as soon as you click on one of the music posts in your repeating group, and even though there is an action to show a floating group before that, the play action still acts faster than show an element action, and the action sees that there is no audio player on the page and gives out the error.

Therefore, to resolve this issue, I would recommend you insert a pause between “show an element” action, and “play the audio” action.

Please let me know if it solves the issue

Looking forward to your reply.

[Kirill]

Hi @fajayi39

In order to reproduce your issue please let me know the device(model) you are having this issue on and the type of browser you tried to use. Does the issue still persist on Chrome? Also, I would like you to make sure that you allow audio in the safari browser, as this might be the cause of the issue.

Looking forward to your reply!

[fajayi39]

Hi im using it on safari on my iphone 12.
It doesnt happen on Chrome on my laptop.
This is specific to a mobile device. Issue persists when other friends try it out. I also allowed audio in my safari browser so it’s not a permissions issue.
Here are the steps:

• I used the zerocode audio recorder plugin for a user to record audio on the website
• Once they hit “stop” on the recorder, i retrieve the value from the recording and use it as the audio for the audio player to play the sound back.

It’s working on my laptop browsers: chrome and safari
but here’s the screenshot on my phone when i’m done recording. The audio file is there but cant hear the playback

[Kirill]

Thank you for the additional information @fajayi39

Indeed, there seems to be a problem hearing the audio output on a mobile device.

Due to the fact that we have some additional questions regarding your settings, can you please add our Support Team email to the list of collaborators to your application and provide me a link to your application? This will allow us to check your settings and run some tests to fix the mentioned problem. Also, please specify the page the name of the test page, where we can check the settings

To add our Support Team as a collaborator, you need to do the following steps in the Bubble Editor:

Settings > Collaboration > Add email support@zeroqode.com

Note: avoid the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.

Looking to hearing from you soon.