因此，对于我正在为网站开发的播放器，专辑插图是通过 XML JSON 从 Last.fm 中提取然后显示的背景。现在，目前，音乐自动播放，播放器应该隐藏所有播放器控件，直到单击播放器，然后它将展开以适应整个艺术品、元数据并具有播放器控件。可以在此处找到播放器的示例（为了您的方便，没有音频） 。我假设我可以使用 jQuery 来实现这一点，但是，当我尝试为它编写代码时，没有任何效果。任何帮助将不胜感激。
编辑：我不是在寻找如何控制音频，更确切地说，我需要在单击时展开播放器、调整艺术品大小并显示控件。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<style>
#streamingWidgetContainer{
text-shadow:rgba(125,125,125,0.9)0px 0px 10px;
z-index: 10;
transition: ease 1s;
-webkit-tranisition: ease 1s;
bottom: 0;
height: 6%;
min-height: initial;
font-size: 0.8em;
font-weight: 300;
color: rgba(255,255,255,1);
position: fixed;
margin-right: 3%;
margin-left: 2.5%;
width: 12%;
box-shadow: 0px 0px 15px rgba(0,0,0,0.09);
display: inline;
text-align: left;
}
#streamingWidgetContainer:hover{
z-index: 10;
transition: ease 1s;
-webkit-tranisition: ease 1s;
height: 14%;
}
#streamingWidget{
font-weight: 300;
}
#artwork{
width: 100%;
height: 100%;
}
#overlay{
padding-left: 0.75%;
padding-top: 1%;
width: 100%;
height: 100%;
background: rgb(58,58,58);
background: -moz-linear-gradient(top, rgba(58,58,58,0.3) 0%, rgba(178,178,178,0.3) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58,58,58,0.3)), color-stop(100%,rgba(178,178,178,0.3)));
background: -webkit-linear-gradient(top, rgba(58,58,58,0.3) 0%,rgba(178,178,178,0.3) 100%);
background: -o-linear-gradient(top, rgba(58,58,58,0.3) 0%,rgba(178,178,178,0.3) 100%);
background: -ms-linear-gradient(top, rgba(58,58,58,0.3) 0%,rgba(178,178,178,0.3) 100%);
background: linear-gradient(to bottom, rgba(58,58,58,0.3) 0%,rgba(178,178,178,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#b2b2b2',GradientType=0 );
}
</style>
</head>
<body>
<div id="streamingWidgetContainer">
<div id="artwork">
<div id="overlay">
<div id="streamingWidgetContents">
<?php
$json = @file_get_contents('http://wpov.streamon.fm/metadata/events/WPOV-32k.json');
$json = json_decode($json, true);
$artistName = $json["TPE1"];
$trackName = $json["TIT2"];
$albumName = $json["TALB"];
echo '<b>' . $artistName . '</b>' . '<br>';
$artist = $artistName;
echo '<i>' . $trackName . '</i>' . '<br>';
echo "<span style='display: none;'>" . $albumName . "</span>";
$album = $albumName;
/*
Super Special Thanks to: edwardmp
*/
class LastFM {
const API_KEY = "7facb82a2a573dd483d931044030e30c";
public static $size_map = array("small" => 0, "medium" => 1, "large" => 2, "extralarge" => 3, "mega" => 4);
public static function getArtwork($artist, $return_image = false, $size = "mega", $album) {
$artist = urlencode($artist);
$album = urlencode($album);
$size = "mega";
$returnedInfo = "http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=" . self::API_KEY . "&artist=" . $artist . "&album=" . $album . "&image=" . self::$size_map[$size] . "&format=json";
$returnedInfo = @file_get_contents($returnedInfo);
if(!$returnedInfo) {
return;
}
$json = json_decode($returnedInfo, true);
$albumArt = $json["album"]["image"][self::$size_map[$size]]["#text"];
if($albumArt == null) {
$albumArt = "http://wpovfm.org/images/wpovDefaultArtwork.png";
}
return (!$return_image) ? print_r($json) : "<style> #artwork{ background: url('" . $albumArt . "') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; } </style>";
}
}
$artwork = LastFM::getArtwork($artist, true, $size, $album);
if($artwork) {
echo $artwork;
}
else{
return;
}
?>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#steamingWidgetContainer").click(function(){
$("#streamingWidgetContainer").css({"height":"14%"});
$("#artwork").css({"display":"inline","width":"20%","height":"inherit"});
$("#overlay").css({"background":"rgba(0,0,0,0)"});
$("#streamingWidgetContent").css({"position":"absolute","margin-left":"6%"});
});
});
</script>
</body>
</html>
此外，我的玩家目标可以在这里看到。
