Are there any free audio players for a webstore?

Discussion in 'Lounge' started by buckaroo, Feb 5, 2023.

  1. buckaroo

    buckaroo Guest

    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. :crazy:

    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!
     
  2.  
  3. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
  4. buckaroo

    buckaroo Guest

  5. buckaroo

    buckaroo Guest

    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

    audio player examples.jpg
     
  6. buckaroo

    buckaroo Guest

    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.
     
  7. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
    Depending on the JavaScript framework you use, there are (free, open source) wrappers around HTML media tags that show a nice player UI
     
  8. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
  9. Lepow

    Lepow Producer

    Joined:
    Sep 12, 2015
    Messages:
    192
    Likes Received:
    104
    Location:
    RJ-BSB
    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
     
  10. phumb-reh

    phumb-reh Audiosexual

    Joined:
    Jun 20, 2019
    Messages:
    1,519
    Likes Received:
    1,175
    Location:
    Neverwhere
    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.
     
  11. Lepow

    Lepow Producer

    Joined:
    Sep 12, 2015
    Messages:
    192
    Likes Received:
    104
    Location:
    RJ-BSB
    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 :)
     

    Attached Files:

  12. MarkyMW

    MarkyMW Platinum Record

    Joined:
    Feb 13, 2021
    Messages:
    184
    Likes Received:
    156
  13. buckaroo

    buckaroo Guest

    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>

    :dunno:
     
  14. buckaroo

    buckaroo Guest

    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
  15. buckaroo

    buckaroo Guest

    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?
     
  16. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
    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>
     
  17. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
    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>
     
  18. buckaroo

    buckaroo Guest

    @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 ;)
     
  19. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
    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>
    
     
  20. Haliax

    Haliax Audiosexual

    Joined:
    Feb 2, 2019
    Messages:
    891
    Likes Received:
    663
    Location:
    Inside the Outside
    I strongly suggest using relative paths (../audio/You-Cant-Always-Get-What-You-Want.mp3) instead of absolute paths
     
  21. buckaroo

    buckaroo Guest

    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?
     
Loading...
Loading...