Free HTML5 Player Generator SHOUTcast Icecast

---

Just change the Stream URL below to your SHOUTcast or Icecast stream and click update to begin. You will find the final copy/paste code below.

Stream URL

Stream is NON-SSL (http://) and may not work with some website builders, browser will display SSL warning if there are any scripts on the webpage that do not begin with https:// Convert Non-HTTP to HTTPS

Update

---

Player Background Color

Update

Play/Stop Button Color

Update

Player Border Dashed Dotted Solid Hide
Border Color

Update

Player Type Box Button-Only
Auto Start Yes No

Autoplay is disabled by default on Android/iPhone bowsers, we recommend you set this to No

Logo URL

Update

Stream Title

Update

Website URL

Update

Social Buttons Facebook Twitter Facebook+Twitter Hide
Include Bootstrap Yes No

Bootstrap is a very common class already included in many websites. If you have styling issues after installing the code that can mean Bootstrap is already installed on your web page, try again with Bootstrap se to NO

---

Copy/Paste Code

Copy Code <!-- BEGIN: SHOUTCASTWIDGETS.COM -- FREE HTML5 PLAYER SHOUTCAST ICECAST GENERATOR --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link rel="stylesheet" href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE"><style>#audioControl img {width: 100px; height: 100px; text-align: left;} #pause {display: none;} a, a:hover, a:active, a:visited, a:focus {text-decoration:none;} #play{font-size:3.000em; } #pause{font-size:3.000em;} @media(max-width: 520px) {#play{font-size:12.000em; } #pause{font-size:12.000em;} .break {display:none;}} @media(min-width: 521px) {#play{font-size:6.000em;} #pause{font-size:6.000em;}}</style> <div style="padding:20px;"><div class="row" style="background-color:#000000; border-style: Solid; border-color: #ff8000;"> <div class="col-sm" style="text-align:center;"> <audio id="StreamAudio" > <source src='http://everestcast-us.myautodj.com:1100/;' type='audio/mpeg' preload="auto" /> </audio> <a id="audioControl" href="#" > <i class="fa fa-play-circle icon-size" aria-hidden="true" id="play" style="float:center; color: #ff8000;"></i> <i class="fa fa-pause-circle icon-size" aria-hidden="true" id="pause" style="float:center; color: #ff8000;"></i> </a></div> <div class="col-sm" style="text-align: center;"><img src="https://shoutcastwidgets.com/player-builder/images/your-logo-here.jpg" width="250px;" height="100px;"></div> <div class="col-sm" style="text-align: center;"> <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=900,height=500,scrollbars=yes'); return false; } </SCRIPT> <a href="https://www.facebook.com/share.php?u=https://shoutcastwidgets.com" onClick="return popup(this, 'notes')"><img src="https://shoutcastwidgets.com/player-builder/images/fb.png" width="50px;" height="50px;"></a> <br class="break" /> <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=900,height=500,scrollbars=yes'); return false; } </SCRIPT> <a href="https://twitter.com/intent/tweet?text=My Auto DJ + SHOUTcast Widgets&url=https://shoutcastwidgets.com&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3DMy Auto DJ + SHOUTcast Widgets%29%26counturl%3Dhttps://shoutcastwidgets.com" onClick="return popup(this, 'notes')"><img src="https://shoutcastwidgets.com/player-builder/images/tw.png" width="50px;" height="50px;"></a> </div></div></div><script>var StreamAudio = document.getElementById('StreamAudio'), ctrl = document.getElementById('audioControl'), playButton = document.getElementById('play'), pauseButton = document.getElementById('pause'); function toggleButton() { if (playButton.style.display === 'none') { playButton.style.display = 'block'; pauseButton.style.display = 'none'; } else { playButton.style.display = 'none'; pauseButton.style.display = 'block'; }} ctrl.onclick = function () { if (StreamAudio.paused) {StreamAudio.play();} else {StreamAudio.pause();} toggleButton(); return false; }; </script> <!-- END: SHOUTCASTWIDGETS.COM -- FREE HTML5 PLAYER SHOUTCAST ICECAST GENERATOR -->

---

---

Player Information and Tips

For the most part, Auto Play is disabled on most mobile devices (browsers) and may require the user to click the play button more then once to begin play if enabled.
Since the majority of your listeners will be on mobile devices, it is highly recommended you set auto play to Off

Bootstrap is a common libary used on millions of webpage and may already be included in your website/webpage. Our free player makes use of Bootstrap to handel the players responsivness

Font Awesome is another type of libary used for the play and stop buttons. Learn more about Font Awesome

The free player has a 100% Responsive Design meaning it will fit nicely on any screen size. As long as you are on a standard computer or max and are able to drag your browser window big to small you can easily test and see how the player changes share as you make the browser larger/smaller.

Learn!

Audio Tag

In the final code above, the section that actually plays the stream is the <audio> tag.
In the below player/code, we include the term "controls" to display it. Since this is not the best looking player, we can hide it and use the play/stop font awesonm icons instead.

Learn more about the HTML5 Audio Element

Player Responsivness

Responsive means everything on the web page including the player should fit nicely reguardless of the users screen size, also when the user device goes from landscape or portrait mode.

Help

When I paste the code into my website, I can see the code but there is no player.
This means you failed to put the code into the <body> tags. If you're using a website builder or a basic text editor, look for a button titled SOURCE or HTML, which will toggle code view and allow you to embed code.

---