Question

因此，对于我正在为网站开发的播放器，专辑插图是从Last.fm通过XML JSON拉出然后显示的背景。现在，当前，音乐自动播放，玩家应该隐藏所有玩家控制，直到玩家被点击，然后它将扩展以适应整个艺术作品，元数据，并具有玩家控制。可以找到播放器的一个示例（没有方便的音频）here。我假设我可以使用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>

此外，我可以看到我对玩家的目标here。

Answer 1

你可以做到

$('#streamingWidgetContainer').on('click', function() {
    // Change formatting
});

另外，为什么不使用css类并在click事件中添加/删除它们？

Jquery Div Click for Audio Player？

1 个答案: