Audio Player Bric


#1

It goes without saying …where is the audio player for single and or multiple mp3 files. Every music site needs one. Shared services like YouTube, SoundCloud and Vimeo are not ideal. Like so many other services they can and do go down or completely disappear. Not to mention you are linking outside your site. Not great for SEO.
By the way Keywords were deprecated years ago.
Only the Title tag and description are used as part of what used to be title, description and keywords.
I’m trying out Blocs. Muse made many mistakes in regards to SEO, schema and good or best practices.
Thx in advance.


#2

Blocs does not have a audio player feature, but you could probably code one yourself for your site.


#3

It’s been awhile. I started out 20 plus years ago moved into Dreamweaver then five years ago went to Muse. I’m trying out Blocs…Blocs has a Native video player (I think a bootstrap 3?)
If there is a stock audio player it would make sense for me. I do a lot with music sites and sites that require audio.
Thanks for your response. I’m new here. My first post.
:slight_smile:


#4

Welcome to the Blocs Forum!

Well, I don’t know a lot of HTML either, but I do know the basics and the internet is filled articles are stuff on how to do this and that. I just searched how to play audio in HTML and I found this: https://www.w3schools.com/html/html5_audio.asp. It looks quite simple. Maybe that’ll be of any help.


#5

Thanks…I’ll give it a whirl. My understanding is that Blocs is suppose to be a drag and drop “visual editor.” I opened the Blocs HTML export in Pinegrow and just used their drag on to the canvas “audio” and presto! It’s there.
Really like the ease of Blocs though. Norm…Shouldn’t be too hard to add a basic “audio bric” to Blocs.
Thank you so much for your kind response.


#6

Okay…that didn’t work. I would need to know what to point to…
I used this code from W3C

Your browser does not support the audio element.

I of course changed out the mp3 files names to the correct one in the assets. I have it in a folder under “audio”.
The video player uses a loader and “vid” as a source.
I was trying to avoid this. :scream_cat:


#7

Just delete the “Your browser does not support the audio element.” text, it appears to work with Safari nonetheless.

Did you specify the path name as well?

You don’t need to edit the exported files. Just add an HTML bric and add your code there.

Does that help? I’m not completely sure what you are asking…


#8

I used standard html5 audio code.

My actual file is “coyote.mp3”…I loaded it into the assets.

First I tried just uploading it to “all”
Then I created a folder called audio and put the file in it.

I don’t see how or where to connect it.
When looking at the video player code …it has different code than standard html. I don’t have any problem doing it manually in a editor …just Blocs.
Pretty confused.

I hope Mr. Norman is seeing this and will respond. Hopefully a bric will be available in the “D” drop choices …it would be a real pain to manually make up over 150 songs on the site.


#9

Sorry, I don’t know what you are asking. If you are having problems, could you explain them to me? I might be able to help you.


#10

hi, some guys on this forum have very good knowledge of Tumult Hype and ways how to integrate it with Blocs app. maybe they will join this discussion. I did some browsing in the past and here are few links of a graphic turntable with support for multiple audio tracks. as far as I know hype generates the code for you, just a few lines that you link in your blocs generated html on export. I will try to play with it in the next few days to see if I can come up with a solution how to integrate it in your project.

here are the links:


#11

… meanwhile you can try this:
https://amazingaudioplayer.com


#12

Thanks everyone…I will try those out today. 5AM here. Getting an early start.
:slight_smile:


#13

I took a look at the code generated by these players. A couple are okay.
Can anyone list the steps to just link to a MP3 asset file. So it will play on the page with the controls?
I do it all the time with standard HTML but cant figure it out with Blocs. I am not linking out side of Blocs. I have MP3 assets in a folder named "audio"
Thanks


#14

Sorry - no Idea.
That’s why I’m using the AmazingAudioPlayer.


#15

The audio players you referenced were indeed created in Hype, but it should be noted that the Hype application has been used primarily to create the animated graphic interface. The underlying functions are a number of external javascript functions that have to be coded/edited by hand. These functions are simply triggered by the Hype graphic elements.

If you can deal with the javascript side of things, and you don’t need the animated graphics, you could create a simple player yourself and just add it to Blocs.


#16

Bootsie, How do you get that player to work in Blocs? I’ve been using this player for some time in other development apps and have had no problems with it. However, when adding the head code to blocs, I get an error message saying “Possible jQuery library duplicates detected! This may cause your site to break, when exported” And that’s exactly what happens. The player shows just fine in the resulting exported page, but it doesn’t play anything - it just shows the media is loading. If you have a workaround to this, it would be great if you could share the details.

The head code is shown below:

<script src="audioplayerengine/amazingaudioplayer.js"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
<script src="audioplayerengine/initaudioplayer-1.js"></script>

#17

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


#18

I’m using Version 2.5.2 !


#19

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?

#20

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.