Audio playback via an icon?

Is it possible
to play a linked audio file via an icon and also stop them so … see my screenshot.
And if so, how is the code for this? :innocent:
Thank you so much!

The first time that no one knows an answer!
Or am I the dumb?!

@vandieck i did look it up and found that some audio playlist is probably the best way to go.
It’s a better experience for the user than a button that just start/stop some audio.
It should have some logical functions behind it, If you click another button the other sound must stop otherwise it just gets messy.
There are tons of more or less confusing solutions for this, but i’d choose a commercial HTML 5 Audio player with playlist that does this good.

Example 1
Example 2
Example 3
Example 4

And lots more here

Thanks for the many suggestions.
But, with “Blocs” you can not integrate and control sound files?
Or did I just have a board in front of my head?

@vandieck It’s often possible to add js and css files and then add custom code in a HTML brick for such things.
I made a quick example some time ago about adding external audio players that played streamed music and radio.

Demo here

Thanks again for your reply.

But if you have your own MP3 files,
how can you integrate it into Blocs without using an external service or player?

I have your code posted here for the integration of videos tried to use …
but unfortunately did not work.

I had the idea, to a colleague who talks a lot on the radio and synchronized, to insert 5 audio examples on his side … and this as simple as possible, so he can exchange them independently with his Blocs - since he also has no idea of HTML and Website technology.

Would not have thought, it would be so complicated.

In Hype Pro there is such an opportunity, but how to combine with blocs?

If you find the answer, let me know))

I have found a way that is not very pretty, but it works.

Enter the following code using the “Html widget”:

Src = "http: //www … is the link for the audio file on the server.

If I find a nicer variant, I’ll post it.
Nevertheless many thanks to @Jakerlund
his examples are much more professional.

PS.: In the case of several audio files,
you should enter “none” instead of “auto” for “preload”,
since it might slow down the loading of the page.


What about this one?
(don’t blame me for the weird music :fearful:)

1 Like

Cool too!
How do I get there with Blocs?

@vandieck oboy… it was a mess to tweak it and i don’t think i can write down all steps.
But if you want i can zip the project later and give you a link to it.

The source files comes from this site if you wanna give it a try.

Dear @Jakerlund … yes, that is really not easy to install.
Especially for my colleague, if he wants to change the files …
and I would not be always his administrator.

But thank you again,
with kind regards

Oh!! This is the same as what I am asking!
I also want to use this function!
I hope to be able to use it in the Blocs…

@kisuke I can adjust it to fit for mobile and send you a link to my files if you want?
It still needs manual code editing to set the song links. And uploading the audio files you want to use.
You can also use external links for the audio files.

Looks like this topic has been going on for a while…about a simple audio player for blocks.
If you put a mp3 file into the assets and export as html it doesn’t show up. Only a “vid” folder and a “img” folder…no audio folder. No mp3. So it appears Blocs is not even recognizing the asset even though it shows in the assets on Blocs …
The more Standard Brics there are included the more popular Blocs will be. Just saying…this is a fun app.

Any hype file can be embedded into blocs. The problem is that you can’t preview it in the Blocs app - you have to export it first and then add the hyperesources folder to the exported web site. This then allows you to preview in a browser.

Most Hype files will work simply by adding the generated head and body code from the html file created by Hype. These elements are added to Blocs through an HTML bric and by adding head code in the page properties dialog.

The image below shows the two code segments from a typical Hype HTML file.

The only thing you should remember is that if the animation doesn’t work in your final web site when output to a folder, it’s probably due to the lazyload feature being enabled when you export your blocs project. Disable this feature and everything should work well.