Embed the HTML 5 Audio Player

Status
Not open for further replies.

Deziel0495

Formerly ScanPEI
Database Admin
Joined
Feb 11, 2008
Messages
673
Location
PEI, Canada
For those who want to embed a HTML 5 audio player with stats instead of the default one, here is a tutorial how. You may need to adjust the width and height values to fit your needs, but the values listed there worked best for me.

See it here: http://scanpei.net/live.php

If you require assistance, just ask and I'll try my best to help.

HTML:
<center>
  <iframe width="305px" height="38px" frameBorder="0" scrolling="no" src="http://api.broadcastify.com/embed/player/?key=API-KEY&feedId=FEED-ID&stats=1&as=0&bg=FFFFFF&fg=000000">Your browser does not support iFrames.</iframe>
<audio controls>
  <source src="YOUR FEED URL (SOURCE SRC) GOES HERE" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</center>
1. Copy and paste the code above into a text document such as notepad so you can make changes.

2. Find your feed on Broadcastify, and listen using the HTML 5 player. Right click on the web player page and choose "View page source" or something similar. You want to see the coding for that page.

3. Find the <audio> tag and copy the URL (source src). It should be a relay.broadcastify.com URL. Paste it into the code replacing "YOUR FEED URL (SOURCE SRC) GOES HERE".

4. Replace "FEED-ID" and "API-KEY" with your own values.

5. Once all your own values are in, copy and paste the code into your own website.

6. ENJOY!

EXTRA: If you want the feed to autoplay, paste this in between <audio controls>
HTML:
autoplay="true"
 

Attachments

Last edited:

Deziel0495

Formerly ScanPEI
Database Admin
Joined
Feb 11, 2008
Messages
673
Location
PEI, Canada
Update: I forgot to add a line break <br> after the iframe and before the <audio controls>.

You may need to add it so the stats and the player "stack".
 

MFDSCAN

Member
Feed Provider
Joined
Jul 9, 2009
Messages
3
Location
Madison
I have right clicked on the HTML5 player and cant seem to find any audio src code, any chance i could get some assistance?
 
Joined
Oct 23, 2009
Messages
844
Location
Lincoln, NE
Update: I forgot to add a line break <br> after the iframe and before the <audio controls>.

You may need to add it so the stats and the player "stack".
i've add the <br> and still no stats


HTML:
<center>
  <iframe width="305px" height="38px" frameBorder="0" scrolling="no" src="[URL][URL]http://api.broadcastify.com/embed/player/?key=API&feedId=ID&stats=1&as=0&bg=FFFFFF&fg=000000[/URL][/URL]">Your browser does not support iFrames.</iframe><br>
<br><audio autoplay="true" controls>
  <source src="URL" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</center>

Update I think it's because I use SSL on my page and the brower was blocking it. I bypass the block but the audio player is not lined up with the stats

Home - King Paging
 
Last edited:

Deziel0495

Formerly ScanPEI
Database Admin
Joined
Feb 11, 2008
Messages
673
Location
PEI, Canada
Note that this method is rather outdated and not needed anymore as you can now embed feeds using the HTML5 player as seen on your feed details page under the "technicals" tab. This feature has been available for a few months now.

1553642209366.png
 
Status
Not open for further replies.
Top