文章/答案/技术大牛

发布

社区首页 >问答首页 >每5秒更新一次AJAX查询，以输出Icecast服务器的相册art

问每5秒更新一次AJAX查询，以输出Icecast服务器的相册art
EN

Stack Overflow用户

提问于 2017-06-29 20:58:57

回答 1查看 1.4K关注 0票数 0

一些背景：

我在Windows计算机上运行了Icecast 2.4.3。我制作了一个驻留在Icecast的"web“目录中的"Now that”xsl文件。文件中当前播放的歌曲的示例如下所示：

getMusic({
    "/stream":{
        "server_name":"Radio",
        "title":"Jack Johnson - Crying Shame"}
    });

从我的网页，我有一个超时功能，将自动更改艺术家和歌曲标题为一个id为“轨道标题2”。此脚本如下所示：

<script>
function updateTitle() {
    $.ajax({
        type: 'GET',
        url: 'https://radio.domain.com/np.xsl',
        jsonpCallback: 'getMusic',
        dataType: 'jsonp'
    }).then(function (data) {
        var $track = $('#track-title').text(data['/stream'].title);
    }).fail(function (e) {
        console.log(e);
    }).always(function () {
        setTimeout(updateTitle, 5000);
    });
}
$(updateTitle);
</script>

所有这些都有效..。

现在，我想通过访问LAST.FM API来增加相册艺术来提升我的网页。该函数位于另一个名为"loadme.php“的单独PHP文件中。

问题：

我似乎不知道如何解析我的AJAX请求(在本例中)，该请求输出到屏幕上，Jack Johnson感到羞耻。我需要抓取所有字符到"-“，类似地，在"-”之后取下所有的内容，并将其放入两个PHP变量，即$artist和$title (分别)。

由于艺术家和书名也可能发生变化，我希望这个调用类似于上面的脚本。

index.php:中的PHP调用

<?php
echo '<img id="albumart" style="text-align:center;" src="';
echo LastFMArtwork::getArtwork('Jack Johnson', 'Crying Shame', true, "small");
echo '">';
?>

显然我已经对标题进行了硬编码以确保API是正确的..。是的，专辑艺术也在我的网页上展示了。

请帮助：开发一个JSON脚本，它每5秒更新一次，调用PHP函数"LastFMArtwork::getArtwork“，但是可以将艺术家和标题解析为两个PHP变量。任何帮助和/或指导都是非常感谢的。

谢谢。

php

jquery

json

xslt

icecast

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-07 12:21:36

因此，在布拉德的一些(好的)指导下，我能够使用SSE (服务器发送事件)和AJAX的混合。

我的index.php页面：

<!DOCTYPE html>
<html xml:lang="en" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#">
	<head>
		<link rel="icon" href="favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-capable" content="yes">
		<link rel="apple-touch-icon" href="apple-touch-icon.png" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="description" content="Person's personal and professional radio station. ***Contains explicit content***">
		<meta name="keywords" content="icecast,radio,internet radio,station,mediamonkey">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
		<meta property="og:url" content="https://radio.domain.com" />
		<meta property="og:image" content="https://radio.domain.com/ogimage.png" />
		<meta property="og:site_name" content="Radio" />
		<meta property="og:description" content="Person's personal internet radio station" />
		<title id="track-title"></title>
		<style>
			html{width:100%;}
			body{background-color:#bfbfbf; text-align:center; font-family:Helvetica;}
			#wrapper{position:absolute; width:300px; height:450px; max-width:550px; max-height:700px; left:50%; transform:translate(-50%,0); -ms-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); margin-right:-50%; text-align:center; box-shadow:1px 1px 20px 5px #4d4d4d;}
                        #albumart{position:relative; text-align:center; box-shadow:1px 1px 20px 5px #4d4d4d;}
			#radio{position: relative;}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script>
function updateTitle() {
	$.ajax({
		type: 'GET',
		url: 'https://radio.domain.com/np.xsl',
		jsonpCallback: 'parseMusic',
		dataType: 'jsonp'
	}).then(function (data) {
		var $track = $('#track-title').text(data['/stream'].title);
		var text = $track.text();
		$track.text(text.replace(" - MediaMonkey",""));
	}).fail(function (e) {
		console.log(e);
	}).always(function () {
		setTimeout(updateTitle, 12500);
	});
}
$(updateTitle);
function sendRequest(){
    $.ajax({
	    type: 'GET',
        url: 'https://radio.domain.com/getalbum.php',
        success: function(data){
                document.getElementById("art").innerHTML = data;
		console.log(data);
                setTimeout(function(){
                    sendRequest();
                }, 10000);
        }});
};
$(sendRequest);
</script>
</head>
<body>
        <div id="wrapper">
        <h2>Live Radio</h2>
        <span id="art"></span>
        <audio id="radio" controls src="https://radio.domain.com/stream" type="audio/mp3"></audio>
        </div>
</body>
</html>

从AJAX (getalbum.php):调用的SSE页面

<?php
require_once("lastfm.php");
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$exe = curl_init();
curl_setopt($exe, CURLOPT_URL, "https://radio.domain.com/np.xsl");
curl_setopt($exe, CURLOPT_HEADER, 0);
curl_setopt($exe, CURLOPT_RETURNTRANSFER, 1);
$raw = curl_exec($exe);
curl_close($exe);
$json = $raw;
//The next 7 lines gets rids of all the "extra stuff" from the np.xsl file
$json = str_replace("\n","",$json);
$json = str_replace("\t","",$json);
$json = str_replace("\"","",$json);
$json = str_replace("({","",$json);
$json = str_replace("\n\t","",$json);
$json = str_replace("parseMusic/stream:{title:","",$json);
$json = str_replace(" - MediaMonkey}});","",$json);
//Find the dash and minus one is the artist!
$artist = substr($json, 0, strpos($json, "-") - 1);
//Find the dash and add 2 and that is the title!
$title = substr($json, strpos($json, "-") + 2, strlen($json));
echo '<h4>'.$artist.' - '.$title.'</br></br>';
echo '<img id="albumart" title="'.$title.'" style="text-align:center;" width="280" height="280" src="';
echo LastFMArtwork::getArtwork("$artist", "$title", true, "extralarge");
echo '"></br>';
flush();

从我的直播网站： screenshot1拍摄

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44834895

复制

相似问题

问每5秒更新一次AJAX查询，以输出Icecast服务器的相册art
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每5秒更新一次AJAX查询，以输出Icecast服务器的相册artEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每5秒更新一次AJAX查询，以输出Icecast服务器的相册art
EN