Looking to trigger HTML 5 audio with an external button

I’m creating a product page for my audio/software company, and on this page I have 20+ products. I’m hoping to have a simple play button within or under each product image that will play a single audio file with no fuss. No volume, no FF/RW, just play and pause. Just like this:

https://8dio.com/

I want to be able to design the button myself using Font Awesome or something similar, or to simply create my own button using a stack to trigger playback of the audio file.

Does anyone know of a stack capable of this?

Thanks!!

-Alex

Try Boom
https://www.doobox.co.uk/stacks_store/demos/boom.html

1 Like

I own it!! But I don’t see a way (or have the skills) to trigger it externally. Any ideas there?

you could just add it as a micro button in a triggered window

It doesn’t get small enough for my purposes (which is a dealbreaker) – and also (though this is NOT a dealbreaker) it’s not really how I want it to look!


Sample:
http://www.ibize.com/sound_triger/
This is a very crud version…just a sample

Thank you for putting the together! I wonder if the star button itself could trigger the audio file, if that makes sense…

you would need to talk to doobox

1 Like

Email sent :slight_smile: thanks so much!!

I sent a note to Wondruss (Round Button guy) about making it to trigger a .mp3…you never know…
that lets you add font awesome icons and sag’s…almost any size.

1 Like

InlinePlayer is another solution that might be suitable. You add one of these to your webpage. It scans your webpage and converts any link ending in .mp3 into a little audio player. Similar in functionality to a shortcode in Wordpress.

Just a play / pause button and the title of the audio file. The title is easily hidden in the stack settings, if you do not want it shown. The colour and the size of the play / pause button is easily changed to suit your taste and to match your existing theme.

I’m surprised this stack has not been suggested already, because it appears to suit the task perfectly.

1 Like

He wants to be able to resize and change the icon to fontawsome fonts!

@joemart1951 I don’t know what version of InlinePlayer you have bought, but I just checked the InlinePlayer myself and it definitely is possible to change the icons used for the play and pause button to anything you want. Plus the size of the icon and various other styling…

35

So you can make the buttons any size, shape, colour or icon you want.

I cannot see anything that would hold you back from recreating similar audio buttons as seen in https://8dio.com/ using this one single stack.

3 Likes

Thanks will

Purchased!

@willwood Thank you for all your help and for the stack!

I have a few questions–

(1) Can InlinePlayer be made so that an existing button becomes the play button itself? That would allow me to freely design anything I want and then plug the button in.
(2) Is it possible for Inline Player to be just the play button? Not the stylish rectangle around it. I don’t need anything but the play button.
(3) If (2) isn’t possible – Instead of just the “play” portion of the button being clickable to trigger the audio, can the entire button (the play/pause symbol + the rest of the rectangular shape) be clickable to trigger the audio?
(4) Can the “click away to stop the audio” functionality be disabled?

Let me show you what I mean! I’m working on this website:

https://mimicaudio.com/shop1.php

  • I’ve added Inline Player to the leftmost product (Bad Guy)
  • I’ve styled the Inline Player so that it appears exactly like the other buttons

Ideally, that “Listen” button would behave like the “Explore” and “Add to Cart” buttons. So in a perfect world, the button itself would cast the same shadow when hovered upon, and the entire button would be clickable, not just the small play button within it.

My thoughts would be that either there’s a way to use the old “Listen” button (for example, the one under Sunflower) to trigger Inline Player somehow. OR, if there’s a way to allow Inline Player to function in such a way that it mimics the old button (no pun intended!)

Also, I’d prefer that users be able to browse through this site without causing the audio to stop upon “click away”!

Thanks again!!

PS

BAD GUY and OLD TOWN ROAD are both Inline Player

I DONT CARE and SUNFLOWER are both “Press” buttons by 1LD (as are all the Explore and Add to Cart buttons)

Take a look at this:
http://www.ibize.com/musicplayer/
This uses Stacks4Stacks inlineplayer

2 Likes
  1. Download the version 1.2 update.
  2. Set your Player Position option to Hidden in the InlinePlayer settings.
  3. Add a suitable button stack to the page and assign it an MP3 link.
  4. Voilà! The button should now start / stop the hidden player.

I tested this with just a regular ‘Button’ stack - the one that ships in Stacks v4 - and it worked as expected. Here is a sample project file to test. It also worked with an EZ Flex Button stack.

I think your milage with other button stacks might vary. Some button stacks out there do not apply links in the normal way and use ‘onclick’ events and other slightly non-conventional approaches we would not be able to cater for.

There is also the ‘scope’ option in the Advanced Settings. So if InlinePlayer is being too aggressive in trying to target other audio players you may already be using in the page, it is possible to setup some more stringent rules for which MP3 links to convert.

Turn off your MP3 titles in the stack settings. Set the border weight to 0px. Set the InlinePlayer Background to ‘none’. You can use opacity sliders on other colour pickers to essentially “nullify” the styling and remove anything else you do not want displayed. I was able to get the buttons back to only the Font Awesome play / pause icons without any trouble:

This could be possible with some custom CSS code if it was still required.

I’m not sure why you would want to disable that. This simple mechanism is what stops the potential problem of multiple MP3 tracks playing simultaneously on the page. I have added a checkbox setting for you, but you’d want to exercise some caution if you did intend to disable it.

Regretfully this is not possible with any audio stacks I am aware of, unless you iFrame / AJAX the webpages and place your audio player outside of the frames. But this would be terribly bad for SEO, responsiveness and accessibility. And a huge amount of time and effort to setup.

You could set the page hosting your InlinePlayer stacks to open in a new popup window:
http://www.corelangs.com/js/progs/window.html

Again not an ideal solution. But there has been a trend for a long time of radio stations and other audio providers having their streaming services open in minified popup windows, like the above example. Mostly only applicable to desktop web browsers, of course.

3 Likes