add artist/title from javascrispt in html5 radio player
- Thread starter Styler Ro
- Start date
pety
Active member
I work with RadioBOSS too.Styler Ro said:
Something like the script used for my radio station?
http://rvesb.ro/radio/radio.html
Styler Ro
New member
i wil copy code from the link in the frist post:
javascript from djsoft:
how you added the title in html5 radio streamer ?
a guy from from stackoverflow told me to try
but not work 
thanks for answar.
Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width">
<title>Amazing HTML5 Audio Player, powered by http://amazingaudioplayer.com</title>
<!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js"></script>
<script src="audioplayerengine/amazingaudioplayer.js"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
<script src="audioplayerengine/initaudioplayer-1.js"></script>
<!-- End of head section HTML codes -->
</head>
<body>
<div style="margin:12px auto;">
<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-1" style="display:block;position:relative;width:300px;height:164px;margin:0px auto 0px;">
<ul class="amazingaudioplayer-audios" style="display:none;">
// how to add artist here?
<li data-artist=?????? data-image="audios/space.jpg" data-live="true">
<div class="amazingaudioplayer-source" data-src="http://music:8005/mp3.mp3" data-type="audio/mpeg" />
</li>
</ul>
</div>
<!-- End of body section HTML codes -->
</div>
</body>javascript from djsoft:
Code:
<div id="track_name"></div> << this work like a DIV, but i need <Li>
<script type="text/javascript">
function UpdateTitle()
{
var xmlhttp;
//get "track name" block
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var s = xmlhttp.responseText;
document.getElementById('track_name').innerHTML = s;
}
}
//use random number in request to prevent caching
var rand_no = Math.random();
rand_no = rand_no * 100;
//read the "temp_title.txt" file
xmlhttp.open("POST", "/radio/temp_title.txt?"+rand_no, true);
xmlhttp.send();
}
//
setInterval("UpdateTitle()", 1000);
UpdateTitle();
</script>how you added the title in html5 radio streamer ?
a guy from from stackoverflow told me to try
Code:
document.getElementsByTag("li")[0].setAttribute("data-artist", s);thanks for answar.
pety
Active member
I use code from jplayer.org
Title is in jquery script...
Title is in jquery script...
Code:
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"http://142.4.223.16:8099/stream",
title: "Radio Vocea Evangheliei ♥ Sibiu",
}).jPlayer("play").jPlayer('volume',0.85);
},
swfPath: "js",
supplied: "mp3",
wmode: "window",
});pety
Active member
I think I understood wrong. You said about title of the track, isn't it?
My entire script:
My entire script:
Code:
var lastSong = 'melodie';
getLastSongs();
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"http://142.4.223.16:8099/stream",
title: "Radio Vocea Evangheliei ♥ Sibiu",
}).jPlayer("play").jPlayer('volume',0.85);
},
swfPath: "js",
supplied: "mp3",
wmode: "window",
});
setInterval(function(){
getLastSongs();
},15000);
});
function getLastSongs(){
$.ajax({
type: "GET",
url: "http://s5.radioboss.fm:8099/played?sid=1&type=json&callback=",
async: false,
jsonpCallback: 'func',
contentType: "application/json",
dataType: 'jsonp',
success:function(data){
writeData(data);
}
});
}
function writeData(response){
if(response[0].title != lastSong){
lastSong = response[0].title;
$('.lastSongs > p').remove();
for(var i = 0; i < response.length; i++) {
$(".lastSongs").append('<p> → '+response[i].title+'</p>');
//getTimePlayed(response[i].playedat);
}
$(".lastSongs p").first().addClass("currentSong");
}
}