Hello
I am reaching out to you because I am not very experienced in web programming. On my musical website, I am using HTML5 Audio Player 1.1 (a brick purchased from weaverskingdom, but no longer available). I would like the background image of the main block to change automatically when the player moves from one piece of music to the next. Any suggestions on how to approach this?
I am using Bloc5 Plus, but I could upgrade to Bloc6 Plus if necessary. Would custom interactions be helpful to simplify programming?
Which looks like it allows setting a āPoster Imageā for each Audio Track. These Brics donāt say what versions of Blocs they support, so be mindful of that.
If the āPoster Imageā is not what you are speaking of, then you would need to use the proper event from the jPlayer library that this Bric uses and code whatever changes you want on said event.
Aside from that, I donāt think the new Interactions Manager in Blocs 6 can tap into 3rd party library APIās as itās not really meant to expose code ā āwithout requiring additional codeā. That would be beneficial though for some users to have access to entry points for doing so.
Thank you very much for this information. Indeed, the Poster Image option does not seem to be suitable. I tried to increase the size of the player, but I canāt get the desired effect.
You are right, version 1.1 of Player was no longer functional since the upgrade to Bootstrap 5. The developer did not have time to make his code compatible. Luckily, I was able to edit it with the help of a friend. It was quite simple in the end.
ā¦ which is a real shame.
This bric is imho a must have when you use many audio file and even videos.
As I donāt have a friend ( ) I must use now the Blocs audio bric.
Is anybody out there who knows how to get rid of the awful grey background color?
Itās not enough to give the player a class with a certain background color because the grey is still there. I want the player transparent.
Unfortunately Lucas doesnāt have time to to care of the āPlayerā.
So we must use the Blocs audio player.
Therefor I must ask again how to get rid of the awful grey background color?
This is the audio player how it looks when you use it.
I want to style it with a background color etc.
Itās not enough to give the player a class with a certain background color because the grey is still underneath. I want the player transparent.
The Audio Player Bric included in Blocs is simply the standard HTML < audio > Element. So you can Google around and find various approaches to style and customize it.
Perhaps @Norm can advise otherwise ā Or even better provide an update for the included Audio Bric Settings via the Inspector UI. Another option would be adding Class Manager > Subclass Lib > Audio. Iām sure users would welcome and appreciate either approach giving users more controls. All the same should be considered for the Video Bric that uses the standard HTML < video > Element when local/remote is chosen.
Both the Audio and Video Brics could use some further āBloc-ificationā giving users finer control to fit within the Blocs ideal of:
āBlocs for Mac ā Create stunning, responsive websites without writing codeā
I know what you mean as there is always a layer of grey under it.
Now I just gave it a class and added my clients colours in - but as you noted it would always give a dull version of it, but thankfully they were ok with it.
Now I do recall once when I got a class from the inspector or something I managed to do a white version when playing around with it!!! Iām sure it was this - but my client actually favoured a dark orange colour.
If I get 5 mins and I find out how I did it, Iāll post here.
One thing would be nice is a colour picker option on the right hand side, or even the same styles as a button to style it too. Thatās a job for @Norm to look at, but I am sure would be a simple thing to implement.
Iām afraid this led to a bit of a dead end, thanks @Blocs_User for the class references, however after various testing, Iām not able to get many of these classes to work in Safari. A custom music player UI would need to be made in order to ensure a cross browser solution.
The Interaction Manager has some of the basics to do this (play, pause, stop), but it lacks the options to create your own timeline and and volume UI functionality.
So if you are happy with a custom play and pause button and maybe some artwork then, you can do this in Blocs right now with the Interaction Manager.
An example of one I made in a few mins using the Interaction Manager and some classes.
Really, are you saying natively or just used through Blocs? I sure would like to hear more, as from what I remember they originated well over a decade ago from Webkit. Did Apple since drop their support (comical), works great in Chrome.
Yeah I was just playing around in Safari before I even tried in Blocs.
If you preview an audio player in Safari, and inspect it, you can see all the styling is injected in from Safari, you can even see the classes given to the controls and you can customise them within the inspector.
However, if you try and do it from a style sheet it doesnāt work. Maybe you could do it with JS and inline styling on the child tags of the audio players UI, but it just gets sketchy.
Typical Apple wanting full control and closed systems. Amusing how Chrome supports it.
Rather odd as to why they cut support of their own implementation. I found the old pages all the way back to 2009 from Apples website, the links are now defunct. It was part of their open source webcore originally I believe. I guess open source went closed source in Safari.
Regardless I guess the bottom line is the present standard use of the <audio> and <video> tags in Blocs does not offer users a Blocs-esque way of doing much. ;ā)
) I must use now the Blocs audio bric.
