Recommended Player for Website

Ltallant · « **on:** June 09, 2020, 12:27:30 AM »

I’m running a number of stations to Zeno / Icecast.

I love the stability and music quality of Zeno....but not a fan for their embed widget player.

Anyone have any recommendations for a better performing and appearance player?

Larry

EmmaS · « **Reply #1 on:** June 09, 2020, 01:09:13 AM »

Quote from: Ltallant on June 09, 2020, 12:27:30 AM

I’m running a number of stations to Zeno / Icecast.

I love the stability and music quality of Zeno....but not a fan for their embed widget player.

Anyone have any recommendations for a better performing and appearance player?

Larry

HTML5 Audio is simple and you can style to fit your liking

Code: [Select]

<audio src="put-your-shoutcast-stream" crossorigin="anonymous" id="audio" controls></audio>
https://www.xperienceradio.co.uk/mobile.php

https://www.xperiencerewind.co.uk/mobile.php

RFU · « **Reply #2 on:** June 09, 2020, 01:11:43 AM »

I know what you mean. I use Zeno too. Great service but I'm also not a fan of their widget, although it is available in multiple sizes

I ended up using the zeno fm link on my website for listeners to access

RFU · « **Reply #3 on:** June 09, 2020, 01:37:27 AM »

I like that first one Emma. Can we get the code?

RFU · « **Reply #4 on:** June 10, 2020, 12:15:30 AM »

Quote from: EmmaS on June 09, 2020, 01:09:13 AM

https://www.xperienceradio.co.uk/mobile.php

https://www.xperiencerewind.co.uk/mobile.php

I like that first one Emma. Can you share the code?

EmmaS · « **Reply #5 on:** June 10, 2020, 07:24:13 PM »

Quote from: RFU on June 10, 2020, 12:15:30 AM

I like that first one Emma. Can you share the code?

I already did... it's HTML5 audio

Code: [Select]

<audio src="put-your-shoutcast-stream" crossorigin="anonymous" id="audio" controls></audio>
Then put into a div with song info of whats playing with jQuery refresh hence the style to fit you're liking

RFU · « **Reply #6 on:** June 10, 2020, 11:34:58 PM »

Well I'm not a programmer and that tells me nothing.
I doubt very much that one string of code runs the player on your website

EmmaS · « **Reply #7 on:** June 11, 2020, 01:28:00 AM »

Quote from: RFU on June 10, 2020, 11:34:58 PM

Well I'm not a programmer and that tells me nothing.
I doubt very much that one string of code runs the player on your website

that one line of code is html5 audio code and putting you're stream url or any other mp3 file in the src will run and play
The other part like I say is container divs with css styling and php to get song information

Ltallant · « **Reply #8 on:** June 14, 2020, 01:51:36 AM »

I really appreciate the info, but since I’m a radio programmer, not a software programmer, I’m in weeds.

I copied the code, but since I’m using Zeno as an Icecast stream, not sure what I should be dropping in, nor do I know what “div” is.

Believe me I realize all of these problems are based on my shortcomings. Again, I appreciate your help. If you any any “players” for Dummies code, I try that. Lol. Larry

Jhonny · « **Reply #9 on:** June 14, 2020, 09:27:15 AM »

here is the code for a simple stream player.Will look like:

Code: [Select]

<?php
//Your stream settings  this are example settings.
$sound_server = 'localhost';  // the stream address local = localhost or 127.0.0.1
$mount_point = "listen"; // the stream name if its ogg set listen.ogg
$sound_port = '8000'; // the stream port
?>
<!-- Using standard html for the audio player -->

<!DOCTYPE html>
<html lang="en">
   <head>
 <title>Stream player</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Between style tags some dimensions and colors -->
  <style>
.table{
    width: 300px;
    /* the background color */
    background-color:#000000;
    /* bit of round conners */
    border-radius: 10px;
}
.td1{
    width: 100px;

}
.td2{
    width: 100px;
}
.td3{
    width: 100px;
}
/* dimension for the speaker image */
img{
    max-width: 90px;
}

 </style>
  </head>
<body>
    <!-- player setup -->
<center><table class="table">
<td class="td1">
<!-- speaker left -->
<img src="speaker.gif"/>
</td>
<td class="td2">
 <!--mid the html5 audio player cobine with php -->
  <audio autoplay controls autoplay="autoplay" style="width:auto; background-color:  transparent">
       <source src="http://<?php echo $sound_server;?>:<?php echo $sound_port;?>/<?php echo $mount_point;?>" type="audio/mpeg" />
        Your browser does not support the audio element. Please upgrade.
    </audio>
</td>
<td class="td3">
 <!-- speaker right -->
<img src="speaker.gif"/>
</td></table></center>
</body>
 </html>

The page and image in a zip

EmmaS · « **Reply #10 on:** June 14, 2020, 02:25:56 PM »

This is a very basic HTML5 audio player for shoutcast streams and although it's not been fully beta tested, I've packaged it due to numerous requests, it has been working fine on my site.

Edit the plconfig.php file with the path to your album art, stream url/IP and the port number.

PLEASE NOTE:
This script does NOT gather album art from a third party.

This is basically what I use for my stations with additional css styling : https://www.xperiencerewind.co.uk/mobile.php

https://www.stewartswebworks.com/radiodj/viewdl.php?dlid=10

Recommended Player for Website

Ltallant

Recommended Player for Website

EmmaS

Re: Recommended Player for Website

RFU

Re: Recommended Player for Website

RFU

Re: Recommended Player for Website

RFU

Re: Recommended Player for Website

EmmaS

Re: Recommended Player for Website

RFU

Re: Recommended Player for Website

EmmaS

Re: Recommended Player for Website

Ltallant

Re: Recommended Player for Website

Jhonny

Re: Recommended Player for Website

EmmaS

Re: Recommended Player for Website