How to show an inline audio player

john

I've tried these, but they don't work on my site:

<audio controls> <source src="name.mp3" type="audio/mp3" /> </audio>

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

Please advise how to get an inline audio player to show on an Automad site.

mad

john Hi, where do you put it?

john

Hello, Mad. Sorry for missing your message. I just put it in the HTML / Markdown box, thus:

006

This is different to the code I originally pasted. It is not a solution for two reasons:

It looks really ugly on the front end
Every audio file on the same page immediately starts playing at the same time, when opening the page. It doesn't make any difference if you add controls

So, I still don't have a solution to adding inline audio.

On some future version, it would be so wonderful if there were some little button you find next to the Image, button that allowed you to paste the link to the audio file and it would produce an inline audio file with controls!

john

john And on the subject of possible future features for consideration, every time I create a gallery I have to write my own code, like this:

<am-gallery class="am-block"> <style scoped>@media (max-width: 437.5px) { .am-gallery-masonry { grid-template-columns: 1fr; } } </style> <div class="am-gallery-masonry am-gallery-masonry-clean-bottom" style="--am-gallery-item-width:250px"> <div class="am-gallery-masonry-item" style="--am-gallery-masonry-rows: 7;" > <a href="/images/image-1.webp" onerror="this.src='/images/image-1.jpg';" class="am-gallery-img-small" data-caption="Caption 1" data-am-block-lightbox> <img width="200" src="/images/image-1.webp" onerror="this.src='/images/image-1.jpg';" /></a> </div> <div class="am-gallery-masonry-item" style="--am-gallery-masonry-rows: 7;" > <a href="/images/image-2.webp" onerror="this.src='/images/image-2.jpg';" class="am-gallery-img-small" data-caption="Caption 2" data-am-block-lightbox> <img width="200" src="/images/image-2.webp" onerror="this.src='/images/image-2.jpg';" /></a> </div> </div> </am-gallery>

The reason I can't just use the standard gallery is that there is no field for alternative image. If I use only .jpg or .png the file size for each image is much larger than if I use .webp. But, if I use only .webp, a few browsers will not be able to see the .webp images.

I would be so great if there were an 'alternative image file' field on the galleries and slideshows so we could use two images and improve our Page Performance metrics with search engines we need to rank with!

mad

john Hi, check out the <audio> tag instead of <embed>. That should work with controls.

john

mad Thank you, but that doesn't work. If you check my first post, you will see that I used the <audio> tag first and nothing appears at all.

This is what I use in the Markdown/HTML field:

<audio controls> <source src="/audio/file-name.mp3" type="audio/mp3" width="100%" /> </audio>

And the results is just empty space. Nothing at all appears.

Where am I going wrong, please?

mad

john Where do you store the audio files on your site. Is the URL correct. You can check in your browser's console if there is any 404.

john

I store the files in a directory called 'audio'. I know the path is definitely correct because the sound files play when I use the same path within the embed element. (The problem with the embed element is that it's ugly and plays automatically and the controls don't work).

mad

john But what does the browser console say? Do you see any 404 errors?

john

Thank you for the reply. It is very strange. There is no error code or missing resource icon - just a blank white area.

mad

john Hi, I quickly tested it and I can’t reproduce the issue. Does it also happen when you upload the audio files to /shared or the page itself? And are you sure that the audio format and compressing settings are supported by browsers?