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:
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.
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!
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.
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.
@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…
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.
@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?
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)
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:
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.
thanks so much!!
