Audio Player Bric

@hendon52
The script looks OK to me.
What version of Blocs to you use.
I remember that error message from former versions of Blocs

I’m using Version 2.5.2 !

Hm.

  • Did you copy the html code generated by AmazingAudio into a html widget in blocs?
  • are all folders (audioplayerengine, audios) in the main folder of your project?

Yep! Both folders are in the project root (where the index.html resides). It displays the player perfectly well, it’s just when a track is selected it just shows that the track is loading, but doesn’t actually load anything. What is really strange is that if I upload the folder of files generated by the app to a web server and then reference the html page generated by the audio player app in an iframe, everything displays and works perfectly. The problem is that I have to use the video bric to create the responsive iFrame, which isn’t ideal because it has a limited range of aspect ratios. This means if the track list was greater than 9 or 10, the iframe creates a scroll bar because it’s too long to fit the iframe.

I would be quite happy with that solution, but I need to figure out how to create a fully responsive iFrame in Blocs - one that can be vertically adjusted to accommodate whatever content is in it. Maybe this is a project for a Bric designer - Strange that there isn’t an iFrame bric at the moment!

I have the same issue with some Hype animations. When they reference some external js, they refuse to work in blocs, presumably due to the same error. However, they too can be added via an iFrame.

So you’re saying the player looks like this (or similar) but doesn’t play anything?

audioplayer

Have a look here:

Maybe it’s for you.

Yes. Here is a screen shot showing the two versions. The first is playing inside a video bric with all files hosted on server, whilst the version on the right has been added as head and body code into Blocs. The second screenshot is the file/folder structure of the Blocs page.

This is really strange.
File/folder structure looks OK.
Are the audio files true .mp3 or .ogg?

I have no explanation at all.

@Norm?

all mp3’s and no spaces in file names - maybe one for the big man to find a solution to. Thanks for looking into it anyway - much appreciated.

Sorry I couldn’t help.
Good luck.

I think I found the solution to your problem.

So, if I’m understanding right, the audio file is not playing on your Blocs site, even though the audio file is in the exact same directory. Am I right?

Well, I found out that simply stating “audio.mp3” doesn’t work in Blocs. I have no idea why, but that’s just what it does. So, instead of stating the path as “audio.mp3”, I had to state the whole entire path (something like this: “http://myaudio.cloudns.cx:8080/audio/audio.wav”). Once, I did that, it worked!

Right now, I’m working on a simple audio player Bric for Blocs which will be made available free for the Blocs community.

1 Like

Exzellent.
Can’t wait.

I am just on the 7 day trial of Blocs. I’ve been trying out and comparing different “one person” apps to replace Adobe Muse. I dread going back to a Dreamweaver interface. Using Bootstrap Blocks or similar is fine as long as it’s easy to style afterwards. Hamburgers on the left for example are proven to be horrible UI/UX.
Essentially having all the standard building bloc(k)s to create a website is generally all that is needed.
A standard Audii player seems like a big oversite for web design. Especially without code.
My fear is that one person built apps just don’t have the customer support needed for professional work.
The business model of beta testers is suspect as well.
If Adobe can’t produce a great app with 12-20 engineers how can one person? They have to be a lot smarter listen to their market not just the people on their social networks.
I have yet to get a simple response as to why there is no audio player. It could be other things are missing as well. Reading through the forum I see there is. Those people just move on. I really hope someone like Norm can pull this together. There are dozens of boutique visual design apps out there each claiming to be great.
I truly hope Blocs succeeds …version 3 maybe.:grinning:

As an ex-Muse user myself, I found the transition to Blocs very simple and I am somewhat relieved that I no longer have to rely on a faceless corporation to listen to my issues. If the addition of an Audio player is the only thing that’s holding you back from being committed to a development app like Blocs, then I think you may be disappointed by other web development apps. All apps have the ability to add a simple HTML audio fragment - usually through a simple piece of code. However, full-blown audio players are usually add-ons produced by third party developers. Even muse needed a third-party widget to create a decent player. There are many options out there that simply require the addition of audio files and setting a few options such as skins. Once the player is completed, it can be added to your Blocs site through an HTML Bric and, possibly the addition of a line or two of head code. Where there may be a js conflict that prevents the player from working directly in Blocs, it can be added via a responsive iFrame. This may not be ideal, but if audio is an essential part of your site, then it’s well worth investing in a third party product designed for the job.

You are coming from the #1 graphics industry software supplier, how did the “big company” approach work out?

People should be more concerned with Adobe and how they can cease production on their designated web app for designers with zero back up plan in place to support them. Far more people seem concerned with Adobe in general across their various apps than with Blocs. It seems like you showed up here not willing to give a fair chance to the app and just complained in all your posts from what I have seen.

Others have already showed that audio capabilities are easily possible. You can add any audio player you want via the HTML Widget, and adding the resources via the Page Settings.

Don’t under estimate smaller or indie style software companies. Adobe just proved to you and other Muse users that “bigger” does not equate to security or longevity, and compared to companies like Affinity, Adobe proves bigger does not equate to innovation either.

People should instead be concerned with the bigger Adobe. :wink:

1 Like

hmmm. Okay…:scream_cat:
Norm is a really nice guy. Got the answers I needed.

that would be great.

many thanks

Here is what I figured out and did in the meantime…works for now.

for one audio file.
Convert mp3 to mp4.
Place in local asset folder (since for some reason Blocs does not see the mp3 files.
Select the bric video and place on page
Place mp4 in video player.
Add class for video player player size or whatever
Sized to 50 pixels high.

Presto! Looks just like a HTML audio player. Just a bit bigger file.

I was able to just duplicate several of these to make a few sample players.

Actually, the solution was easier than you think. When I checked the source code of the blocs generated page, it had added an additional source file to the audio tracks (lazy load-ph.png). As a consequence, the audio source had two files to contend with - the png and the mp3. This was causing the mp3 track to stall.

In order to check it, I added a simple audio tag to an HTML brick to create a single track player as follows:

<audio controls>
  <source src="track1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Sure enough, on export, Blocs added the lazyload src to the audio track information. I then discovered that this was due to the lazy load setting in Blocs advanced export options. If this is disabled as shown below, all audio problems get resolved. I think this is an issue that should be checked by @norm. This shouldn’t happen!

So, if I’m understanding you right, the easy way to fix this problem is to disable lazy loading?