Music player, online store and problem with bric placement!

Hey there! Im new in the forum! I been reading since a while about blocs but is a bit hard for people who doesn’t have any experience with coding.
Also is quite limited for music and selling online!
Im trying to ad a music player to a shop I want to create but I have no idea of how to do it!
I dont really likes how the amazingaudioplayer looks like as Im looking for something more professional.
Searching online I found this https://aplayer.js.org/#/home but I have no idea of how to make it work! I mean where to place the mp3 files.
If anyone here could do some step by step tutorial will be great.
also I cant find any share on facebook bric and still haven’t figure out how to place everything how I want. What I mean with this is:
You can share the blocks up to 6 but you cant drag and place the stuff wherever you want
Here a picture:


How can I place a picture on the left side and the music player on the same place as the picture?
I know it seems to be lot of stupid questions but not everyone have experience to build websites or money to pay someone.
Also I been searching for a good shop that will allowed me to sale digital but there is no much information here. I found www.snipcart.com but again there is no information of how to use it with blocs! How can I make a buy now button and linked to them. There is a code on their web but the support guys from snipcart doesn’t know where to place it on blocs :confused:
Any kind of help will be very appreciated.
Thank you so much in advance

Hi @Stewie_Griffin, welcome to the forum.

Regarding a music player:

You might find something useful in this thread concerning audio players

Or this custom Bric that is offered by a 3rd party developer

You could also use the aplayer or others via the HTML Bric , Div Bric , Page Settings + Add Code, etc.


Same goes for the Snipcart or other e-commerce, via the HTML Bric , Div Bric , Page Settings + Add Code for CSS & JS resources as needed based upon setup and usage instructions provided by whatever 3rd party libraries, plugins you wish to implement – like Installation – Snipcart Documentation


Regarding placement, start with the basic Structure Blocs, and use the class editor as needed also …
https://help.blocsapp.com/moving-elements/
https://help.blocsapp.com/category/design/

Ahh! ok! so the code you ad it on the code setting of the page right? I mean were I want the shop to be placed?
Any chance you know were I can get some good video tutorials to get more into this app?
The thing is with the aplayer I dont know where to ad the mp3 or how to route it :confused:

I watched the video but still I wont be available to place the elements where I want. For example


I want to design a page just as this one so if I place the picture on the left side and I want to ad after the names of the tracks on the right side. How I can make the divider on the same place as this one? Mine is getting place under the picture as I have to ad another bric box. Does it make any sense to you?

See the links provided in this thread:

but how can I place the divider like on the picture?

There should be no problems creating what you have shown in your second screenshot, have a look here:
https://help.blocsapp.com/brics-basics/

Please keep your comments to the thread not via Private Message.


Also please take the time to familiarize yourself with the app, read the documentation, and watch the FREE course by @Eldar already linked to above, at that point you should be able to do your second screenshot fairly easily.

A quick example with no details or styling, just showing it can be accomplished via dragging and dropping Brics based upon your screenshot:

1 Like

I did it!!! :grinning::grin::rofl::smiley:
but Im having a problem and dunno why! First of all as you can see in the picture I cant place at the same line the store icon, as there are not such icon as this one I used pictures that I previously edited on photoshop. Also the I jump for the mobile and Tablet version there is a problem! Im watching all videos but they dont explain it :disappointed:

You mean like this…

MusicWebsite.zip (1.2 MB)

1 Like

Yes! how did you do it?

Here’s the Blocs file to guide you…

Music Website.zip (175.1 KB)

Thank you so much I figure it out thanks to you :smiley: ! Also your icon help me a lot because now I have the right dimensions to create my own!! By chance will you know how this his happening? website when you click on the track you get a soundcloud Embed link on the page!

1 Like

You can do a toggle hide then embed the soundcloud…

OMG!!! I did it!!! I watch @Eldar video and it was actually https://youtu.be/OWZ8Cl0aofA Thank You so much!!! :smiley:

1 Like

@mackyangeles I was reading one of your post about the lightbox pop up text! Did you manage to do it? Im trying to do something like this:

Its come up with you press the more info button :slight_smile:

For those generally interested in the issue of playing sound, the best option is to use a javascript library. The best one is howler.js which has great support and is easy to work with once you understand the simple implementation route for which there’s good docs on GitHub. A fairly new script is tone.js which looks promising.

I know from experience howler is widely used, reliable and easily implemented to create almost limitless sound referencing options. I’ve used it with GSAP to produce complex animations with sound track. Great fun to play with!

I’ll do a demo and tutorial some time. Do check it out though.

Cheers,

Buzz

1 Like

Hi Buzz Howler looks beautiful! Thank you :blush:

My pleasure - hope it works for you…

Buzz

I think Norm (the developer) just spilt his coffee.

Blocsapp doesn’t need coding but if you go for customisation beyond the standard facilities you’ll find it helpful to understand HTML/CSS and javascript.

1 Like