Hi friends!

*TL;DR Are there any free audio players for webstore product windows? It can be extremely basic as far as the control functions and appearance goes.

So I am putting together a webstore and want to add an audio player to each product window, however, the platform only has options for Soundcloud, Youtube or Vimeo direct URL input link/embedding. They say others *might* work (URL embed), but I've been unable to find any platforms offering song hosting>audio player widgets beyond like 3 players/5mb per file. They all have paid plans with pricing around $15-$20 per month and even those have file size and number of audio player limits. And The last thing I want is yet another subscription.

I (kinda stupidly) already bought a 2 year hosting plan a few months back before discovering this store platform, which is great, but after linking my ".com" domain to the store, now I have this hosting plan I am not using for anything right now. The hosting plan wasn't too pricey so no biggie, but anyway it has a 20GB storage file size cap, 300,000 files, unmetered bandwidth etc., plenty of space for simple MP3 audio preview files, but then (in theory anyway) I will also need an audio player and have to figure out how to connect the audio file to the audio player and how to embed it into each product window on the store.

The store platform allows for CSS customization, which I know a teeny tiny little about, I have used it for spacing issues, removing borders and stuff like that, but not audio players, only simple things and I usually futz around with stuff until it works rather than knowing exactly what I am doing going into it. I learn as I go by doing it. The platform has pretty good customer support and has helped me with some minor design fixes already, so they may be able to help with this as well - they don't currently offer a built in audio player unfortunately.

The reason I don't want to use SC, YT or Vimeo is because they are all blocked in the most highly populated countries around the world. As this is a store, I mean seriously, I really would rather not open it knowing I've already eliminated some 4 billion potential customers because they wont be able to listen to any previews of products on offer.

Anyway, so yeah, hoping some of you experts here might have some ideas or know of such an audio player solution?

Much thanks guys!

 

HTML5 has built in media tags

see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

 

Last edited by a moderator: Feb 5, 2023

Thanks. I quickly just tried the audio HTMLAudioElement embed didn't work, shows up as text on the site.

 

Ok so reading a random old forum I just accidentally discovered a very simple solution that worked perfectly. However, the audio player has a dot menu with download and playback speed option in it, which I don't want. Any ideas on how to edit that out?

Also, I am not sure how to get the URL's from uploading audio files to hosting storage to then input into the below code .. im using Namecheap, any ideas?

Here is the code for anyone else in need of a player:

<audio controls title="You Can't Always Get What You Want"> <source src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3" type="audio/mpeg"> </audio>

Obviously, i'll just replace the text name and URL with my own... attached is a photo of what it looks like on my site

 

Just playing around with positioning the player, trying to get it within the product area, the description or just below it. not having any luck. The alignment/placement of the player looks wonky. Hmm.. might be back to seeking a audio file hosting/URL widget like Soundcloud, but one that works worldwide...

still, the above simple audio player, if I can remove the download menu, might be useful for other purposes.

 

Depending on the JavaScript framework you use, there are (free, open source) wrappers around HTML media tags that show a nice player UI

 

Look at: https://www.mediaelementjs.com/

 

Hey there! Not a killer, but tits served me well on my pirate web radio back then
https://www.muses.org/setup
https://github.com/fbricker/muses
Dont laugh as it's FLASH based, but once again, has served me well back then

<div class="loophole-container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="168">
<param name="movie" value="muses.swf" />
<param name="flashvars" value="url=http://loophole.dyndns.org:8000/rad...falsee&skin=loophole-phlat.xml&title=Loophole Radio&welcome=Watch your bass bins!" />
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="always" />
<param name="scale" value="noscale" />
<embed src="muses.swf" flashvars="url=http://loophole.dyndns.org:8000/rad...=false&skin=loophole-phlat.xml&title=Loophole Radio&welcome=Watch your bass bins!" height="168" width="300" allowscriptaccess="always" scale="noscale" type="application/x-shockwave-flash" wmode="transparent" />
</object>
</div>

loophole was the name of the radio. lol

 

Flash Player is End-of-Life since '20, so there's no support or official downloads and no browser comes with it anymore.

You might work around it by using Ruffle, but it doesn't do Flash 100% so it might only work somewhat.

Sorry.

 

i said it was no killer, not to mention i don't touch this project for at least 6 years
just tried to load the html, yeah, it doesn't show where the component should be anymore, bummer, is it my time has come to be an old fart now?
if i remember correctly at the time tit was the only solution i could come up with that would equally play at android and ios native browsers edit also in my defense the html is still timeless

 

Maybe this is what you're looking for:

<audio id="myaudio" controls controlsList="nodownload noplaybackrate">
<source src="horse.mp3" type="audio/mpeg">
</audio>

For more info:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

 

Last edited: Feb 5, 2023

Thanks everyone for suggestions and trying to help me out here.

That got rid of the menu download/playback speed, but the player doesnt actually play anything. I suppose some combination of the 2 codes will be the solution?

<audio controls title="You Can't Always Get What You Want"> <source src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3" type="audio/mpeg"> </audio>

-----spliced together with:

<audio id="myaudio" controls controlsList="nodownload noplaybackrate">
<source src="horse.mp3" type="audio/mpeg">
</audio>

 

Anyone here have experience with either of these?

https://noisetrade.com (after reading a bit more on the site, probably not what I am after here)
https://audiomack.com

Supposedly viable FREE unlimited SC alternatives, but I have yet to read the fine print or try them.

Side note, I had a couple of friends in different places where SC is blocked try out my website that has SC players on the mockup products and the screenshots they sent me are a total mess littered with "webpage not available" type of errors inside the product window sections, all over the place. They also tried while using VPN's and one friend said it took about a full minute for the page to load, the other said also slow to load and there were some odd overlap issues with the players. UGH!!!

 

Last edited by a moderator: Feb 6, 2023

On the surface, Audiomack seems like a contender. Looks to be mostly hiphop oriented, which is not what I do, but for my purposes (hosting, linking URL/embedding audio/video players) it might do the trick. Anyone here use it and have any feedback?

 

This works

HTML:

<audio id="myaudio" controls controlsList="nodownload noplaybackrate"      
  src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3">
</audio>

Bear in mind that src either has to be a relative path to the audio (relative from the html) or an absolute path

HTML:

<audio id="myaudio" controls controlsList="nodownload noplaybackrate"       
  src="../audio/You-Cant-Always-Get-What-You-Want.mp3">
</audio>

 

Or if you decide to use the mediaelement wrapper (jquery plugin)

HTML

Code:

 $('#player').mediaelementplayer();

Javascript

Code:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/3.2.4/mediaelementplayer.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/3.2.4/mediaelement-and-player.min.js"></script>

<audio id="player" style="max-width:100%; width: 100%;">
    <source src="../audio/You-Cant-Always-Get-What-You-Want.mp3" type="audio/mpeg">
</audio>

 

@Haliax The first one:

<audio id="myaudio" controls controlsList="nodownload noplaybackrate"
src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3">
</audio>

works great and no more menu, but we lost the: audio controls title="You Can't Always Get What You Want" song title that appears when hovering over the player. If we can get that back, then its perfect (as simple as it may be).. funnily enough I just saw the exact same player on the sister site with previews for a few M4L devices ;)

 

Code:

<audio id="myaudio" controls controlsList="nodownload noplaybackrate" title="You Can't Always Get What You Want"         
  src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3">
</audio>

 

I strongly suggest using relative paths (../audio/You-Cant-Always-Get-What-You-Want.mp3) instead of absolute paths

 

Yep, that did it! Works great. Thanks for the help! Now if I can just get the damn thing positioned inside the product window/area or just below it...

Signed up for Audiomack, will test when have time. Nobody here uses it?