The following instructions explain how to configure and embed the TundraCast player in your website. The TundraCast player looks similar to the following:
Step 1: Set the script and CSS
The first step is to copy and paste the following code between the <head> and </head> tags on your site:
<link href="http://cors.tundracast.com/css/myCast.min.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
Step 2: Embed the player where you want it on the page
Copy and paste the following code between the <body> and </body> tags on your site where you want the player to show up:
<div class="myCast" id="stream1"></div>
<script src="http://cors.tundracast.com/js/myCast.js"></script>
<script>
$("#stream1").myCast({
serverID: 'wxxx',
serverPort: '8080',
version: "tundracast",
mount_point: "stream",
cors:"http://cors.tundracast.com",
artwork: "true",
volume: "0.75",
autoplay: "false",
bg: "grey",
accent: "orange",
lang: "en",
})
</script>
Replace the 'serverID' and 'serverPort' at a minimum. Other attributes can be changed as well to best fit the design of your site.
If the CSS and JS files appear to be offline, try accessing them on port 2001. If the CORS server appears not to serve the request (or a general request like 'www.summittechgroup.com') use port 2000. This may only be necessary for advanced setups.
Advanced HTML Attributes
The following can be added to the code in the body section to further customize the player.
- artwork: Display album artwork. If set to false, logo will be shown (Boolean)
- logo: This image will be used as album cover fallback (String)
- bg: Background for the player (Color)
- accent: Accent color applied to play/pause button and slider thumb (Color, except White)
- vertical_layout: Sets vertical layout (Boolean)
- blur: Add a blur effect with the album cover to the player background (Boolean)
- blur_opacity: Blur effect opacity (Integer)
- lang: Prefered language for Server Info (String)
- volume: Defines the initial volume level (Integer)
- autoplay: Play radio stream on page load (Boolean)
- src: Used for play/pause function (Unused)
Colors:
red, pink, purple, deeppurple, indigo, blue, lightblue, cyan, teal, green, lightgreen, lime, yellow, amber, orange, deeporange, brown, grey, bluegrey, darkblue, black, white.
Language codes shall use the ISO 639-1 standard.
