SoundCloud iframe嵌入之外的播放按钮在iOS中无法工作

时间:2015-02-10 16:58:20

标签: iframe soundcloud

我有一个位于嵌入式SC播放器外面的播放/暂停按钮。它可以在桌面浏览器(Mac上的Chrome和Safari)上正常运行,但在iOS中,外部播放按钮不会触发嵌入式播放器。如果我单击嵌入式播放器上的播放然后外部按钮工作,我可以让文件开始播放,但只有在嵌入式触发后才能开始播放。

Fiddle here。{
{3}}

JS

function toggle(el){
    if(window.isPlaying)
    {
        el.src='http://www.debbiemillman.com/designmatters/totest/delivery/_images/pause.png';
        el.className="pause";
    }
    else 
    {
        el.src='http://www.debbiemillman.com/designmatters/totest/delivery/_images/play.png';
        el.className="play";
    }

    return false;
}

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

HTML

    <!--JQUERY FOR FOR SOUNDCLOUD GIANT PLAY-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="http://w.soundcloud.com/player/api.js"></script>

    <script>

    var isPlaying = false;
    $(document).ready(function() {

        var widget = SC.Widget(document.getElementById('soundcloud_widget'));
        widget.bind(SC.Widget.Events.READY, function() {
            console.log('Ready...');
        });

        widget.bind(SC.Widget.Events.PLAY , function() {
            isPlaying=true;
            toggle($(".buttoner img")[0]);
        });

        widget.bind(SC.Widget.Events.PAUSE , function() {
            isPlaying=false;
            toggle($(".buttoner img")[0]);
        });

        widget.bind(SC.Widget.Events.FINISH , function() {
            isPlaying=false;
            $(".buttoner img")[0].attr("src","http://www.debbiemillman.com/designmatters/totest/delivery/_images/play.png");
        });

        $('.buttoner').click(function() {
            widget.toggle();
            isPlaying=!isPlaying;
        });

    $(".buttoner img").hover(function(){
            if(isPlaying)
                $(this).attr("src","http://www.debbiemillman.com/designmatters/totest/delivery/_images/pause-over.png");
            else
                $(this).attr("src","http://www.debbiemillman.com/designmatters/totest/delivery/_images/play-over.png");
    },function(){
        if(isPlaying)
            $(this).attr("src","http://www.debbiemillman.com/designmatters/totest/delivery/_images/pause.png");
        else 
            $(this).attr("src","http://www.debbiemillman.com/designmatters/totest/delivery/_images/play.png");
    })
    });
    </script>

</head>

<body>

    <div class="buttoner">

        <img src="http://www.debbiemillman.com/designmatters/totest/delivery/_images/play.png" class="play" onClick="toggle(this);" width="200" />

    </div>

    <iframe id="soundcloud_widget" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F183633436&amp;auto_play=false&amp;show_artwork=false&amp;color=ff7700" style="margin-bottom:20px;width:100%;height:166px;overflow:hidden;border: 0px;"></iframe>

</body>

我相信我在SoundCloud开发/ API页面上的某处获得了初始代码。

谢谢!

0 个答案:

没有答案