Hitbox Follower Alert

时间:2014-05-17 07:29:56

标签: live-streaming twitch

有一个名为hitbox的网站。它类似于抽搐,但据我所知,api是相当不同的!我尝试采取抽搐跟随者警报并稍微更改代码以使其与hitbox一起工作但没有运气。我不想创建一个完整的程序,因为这需要花费很多时间。我只想制作一个网页并在那里展示最新的粉丝。可以找到hitbox api here。 如果你认为在mIRC中做这样的事情会更容易,那么就这样做,但我认为用网页做起来会更容易。编程时我总是n00b所以如果你可以向我解释一切我会欣赏它(我想开始学习编码,但我真的不知道从哪里开始。至少我很年轻( 14)所以我有足够的时间来做这件事)

谢谢你 - 安德鲁

1 个答案:

答案 0 :(得分:3)

我刚刚在Google上搜索有关Hitbox的一些信息时发现了你的帖子。 你知道吗!?我刚刚在30分钟前制作了一个追随者警报应用程序。 这是代码,实际上它非常简单。 (hitbox_followeralert.js)

var followers = 0,
    lastCheck = 0,
    lastFollower = "",
    sound = new Audio("AlertSound.ogg"),
    channel = "MaitreChocobo";

function checkForNew(){
    $.getJSON("http://api.hitbox.tv/user/"+channel, function(data){
        followers = data.followers;

        if(followers > lastCheck && lastCheck!=0){
            sound.play();
            $.getJSON("http://api.hitbox.tv/followers/user/"+channel+"?offset="+(followers-1), function(gata){

                $("#new-follower").html(gata.followers[0].user_name);

                $("#follower-alert .text").css("font-size", "45px");
                $("#follower-alert").fadeIn("slow");
                setTimeout(function(){
                    $("#follower-alert").fadeOut("slow");
                }, 10000);
            })
        }
        lastCheck = followers;
    }).fail(function(){
        console.log('An error occurred!');
    });
}

setInterval(checkForNew, 5000);

由于我从NightDev的Twitch Follower Alert中获得灵感,因此我复制了整个网页,使一切变得更加简单。这是页面。 (的index.html)

<html>
<head>
    <meta charset="utf-8">
    <title>Follower Alert</title>
    <style>
      body {
        background-color: transparent;
        color: white;
      }

      #follower-alert {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 580px;
        height: 110px;
      }

      #follower-alert .text {
        margin-left: 170px;
        padding-top: 45px;
        text-align: center;
        width: 385px;
        line-height: 45px;
        vertical-align: middle;
        font-size: 45px;
        font-family: Impact;
        text-shadow: 2px 2px 1px #000;
        white-space: nowrap;
        color: #ffffff;
      }
    </style>
  <style type="text/css"></style></head>
<body>
<div id="follower-alert" style="background-image: url(template.png);">
 <div class="text" id="new-follower" style="margin-left: 15px; width: 550px;"></div>
</div>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="hitbox_followeralert.js"></script>
</body>
</html>

您只需更改顶部的频道变量即可匹配您的用户名。 如果您不需要,也可以删除声音部分。我还在根文件夹中创建了一个名为 template.png 的简单背景。所以我有4个文件来制作这个小项目:index.html,hitbox_followeralert.js,AlertSound.ogg,template.png

然后将它添加到OBS我使用了名为CLR Browser的插件,你很高兴去了!

希望这可以帮助你,我现在回答你的问题还为时不晚。 -MaitreChocobo