← Back to TuneJourney

Developers

Add a lightweight radio experience to your website with TuneJourney Widget. Our widget is not only a radio play button, it is an AI-powered smart radio layer that can improve your site visitors' experience. It also exposes details about the current station, location, and metadata so you can integrate it directly into your site experience like no other widget.

Integration is free and unlimited. The only requirement is attribution via "Powered by TuneJourney.com," exactly as shown in the embed snippet below.

Live Example

This live example is rendered using the exact embed snippet shown in Quick Start.

Need a pure static integration test page? Open /widget/demo.html.

Quick Start Embed

Paste this into your HTML where you want the player bar to appear.

<!-- TuneJourney Radio Widget -->
<div id="tunejourney-widget" style="display:inline-block;" data-theme="auto">
  <a href="https://tunejourney.com"
     title="TuneJourney - Explore the world through radio"
     rel="noopener"
     style="font-family:system-ui,sans-serif;font-size:11px;color:#4CB648;text-decoration:none;">
    Powered by TuneJourney.com
  </a>
</div>
<script src="https://tunejourney.com/widget/embed.js" async></script>

JavaScript API

Use events for context updates (location, station metadata) and commands for control.

// Minimal host integration
window.TuneJourney.on("stationChanged", function (payload) {
  console.log("Journey:", payload.journey.name, payload.journey.coords);
  console.log("Station:", payload.station.name, payload.station.genres);
  console.log("Location:", payload.station.location);
});

window.TuneJourney.on("nowPlaying", function (payload) {
  console.log("Now playing metadata:", payload.nowPlaying);
});

window.TuneJourney.spin();
window.TuneJourney.pause();
window.TuneJourney.setVolume(0.5);
window.TuneJourney.getState();

AI Agent Handoff

You can share this exact page URL with your AI coding agent. It contains enough context and snippets for implementation.

Recommended instruction to provide your AI agent:

Implement TuneJourney widget integration using https://tunejourney.com/developers/ as the source of truth.
Requirements:
1) Embed the widget using the provided HTML snippet.
2) Listen to stationChanged + nowPlaying events.
3) Connect stationChanged journey coordinates to our map fly-to behavior.
4) Handle play/pause state updates in UI.
5) Add basic error-safe guards if widget API is unavailable at startup.

Troubleshooting

  • Ensure the script source is exactly https://tunejourney.com/widget/embed.js.
  • Widget panels (volume, playlists, filters) expand inside iframe space, so the iframe must allow enough vertical room.
  • Do not strip iframe sandbox attributes from the generated embed.
  • If no events fire, wait for the ready event before issuing commands.