このSquareSpaceの背景ビデオスクリプトの自動再生音声？

Question

私はSquareStuio.ioからこのスクリプトを手に入れましたが、私のクライアントは現在再生していないオーディオを自動再生します。オーディオを開始するには、ユーザーが「ミュート解除」する必要があります。オーディオを自動再生する方法に関するアイデアはありますか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
<script type="text/javascript" src="https://www.youtube.com/player_api"></script> 
<script type="text/javascript"> 
    function onYouTubeIframeAPIReady() { 
    init() 
} 

function init() { 
    url = $(".sqs-video-background, .gallery-video-background").first().attr("data-config-url"), build_player(), build_controls(), add_control_listeners() 
} 

function build_player() { 
    if (vimeo) { 
    var a = document.getElementById("vimeoplayer"); 
    player = $f(a) 
    } else player = YT.get("player") 
} 

function build_controls() { 
    var a = ".banner-thumbnail-wrapper, #banner-area-wrapper, .index-section-wrapper, .banner-image, .image-wrapper, .Intro, .main-image", 
    b = ".sqs-slide", 
    c = ".sqs-slide-layer-content"; 
    $(c).length > 0 && (b = c); 
    var d = $(a + ", " + b).first(); 
    d.append('<div id="button_container"></div>'), vimeo && $("#button_container").append('<div id="play_pause" class="button_switcher"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png" class="video_button play_pause_btn" id="play_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png" class="video_button play_pause_btn" id="pause_button"/></div>'), $("#button_container").append('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png" class="video_button mute_unmute_btn" id="mute_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png" class="video_button mute_unmute_btn" id="unmute_button"/></div>'), $("#button_container").css({ 
    position: "absolute", 
    width: "70px", 
    height: "30px", 
    right: "25px", 
    bottom: "20px", 
    "z-index": 1e4 
    }), $(".button_switcher").css({ 
    width: "30px", 
    height: "30px", 
    position: "relative", 
    display: "inline-block" 
    }), $(".video_button").css({ 
    display: "inline-block", 
    position: "absolute", 
    "vertical-align": "top", 
    opacity: .99, 
    width: "30px", 
    height: "30px", 
    cursor: "pointer" 
    }), $("#play_button, #unmute_button").css("opacity", 0) 
} 

function add_control_listeners() { 
    $(".play_pause_btn").click(function() { 
    build_player(), paused ? (vimeo ? player.api("play") : player.playVideo(), paused = !1) : (vimeo ? player.api("pause") : player.pauseVideo(), paused = !0), play_pause_switch() 
    }), $(".mute_unmute_btn").click(function() { 
    build_player(), muted ? (vimeo ? player.api("setVolume", .5) : player.unMute(), muted = !1) : (vimeo ? player.api("setVolume", 0) : player.mute(), muted = !0), mute_unmute_switch() 
    }) 
} 

function play_pause_switch() { 
    paused ? ($("#play_button").animate({ 
    opacity: .6 
    }, 500), $("#pause_button").animate({ 
    opacity: 0 
    }, 1e3)) : ($("#play_button").animate({ 
    opacity: 0 
    }, 1e3), $("#pause_button").animate({ 
    opacity: .6 
    }, 500)) 
} 

function mute_unmute_switch() { 
    muted ? ($("#mute_button").animate({ 
    opacity: .6 
    }, 500), $("#unmute_button").animate({ 
    opacity: 0 
    }, 500)) : ($("#mute_button").animate({ 
    opacity: 0 
    }, 500), $("#unmute_button").animate({ 
    opacity: .6 
    }, 500)) 
} 
var player, url, paused = !1, 
    muted = !0, 
    vimeo = !0; 
</script> 

Answer 1

は、あなたがそのような何かを行う必要があります：

var hear = document.getElementById('listen'); 

$(function() { 
    if(hear.paused) { 
     hear.play(); 
    } else { 
     hear.pause(); 
    } 
}); 

Answer 2

ルックここでスクリプトがあります！私は今あなたのコードに私のコードを加えました、そして、私は新しいHTMLスケルトンを追加しました。

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Stack Overflow</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
<script type="text/javascript" src="https://www.youtube.com/player_api"></script> 
<script type="text/javascript"> 
    function onYouTubeIframeAPIReady() { 
    init() 
} 

function init() { 
    url = $(".sqs-video-background, .gallery-video-background").first().attr("data-config-url"), build_player(), build_controls(), add_control_listeners() 
} 

function build_player() { 
    if (vimeo) { 
    var a = document.getElementById("vimeoplayer"); 
    player = $f(a) 
    } else player = YT.get("player") 
} 

function build_controls() { 
    var a = ".banner-thumbnail-wrapper, #banner-area-wrapper, .index-section-wrapper, .banner-image, .image-wrapper, .Intro, .main-image", 
    b = ".sqs-slide", 
    c = ".sqs-slide-layer-content"; 
    $(c).length > 0 && (b = c); 
    var d = $(a + ", " + b).first(); 
    d.append('<div id="button_container"></div>'), vimeo && $("#button_container").append('<div id="play_pause" class="button_switcher"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png" class="video_button play_pause_btn" id="play_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png" class="video_button play_pause_btn" id="pause_button"/></div>'), $("#button_container").append('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png" class="video_button mute_unmute_btn" id="mute_button"/><img src="https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png" class="video_button mute_unmute_btn" id="unmute_button"/></div>'), $("#button_container").css({ 
    position: "absolute", 
    width: "70px", 
    height: "30px", 
    right: "25px", 
    bottom: "20px", 
    "z-index": 1e4 
    }), $(".button_switcher").css({ 
    width: "30px", 
    height: "30px", 
    position: "relative", 
    display: "inline-block" 
    }), $(".video_button").css({ 
    display: "inline-block", 
    position: "absolute", 
    "vertical-align": "top", 
    opacity: .99, 
    width: "30px", 
    height: "30px", 
    cursor: "pointer" 
    }), $("#play_button, #unmute_button").css("opacity", 0) 
} 

function add_control_listeners() { 
    $(".play_pause_btn").click(function() { 
    build_player(), paused ? (vimeo ? player.api("play") : player.playVideo(), paused = !1) : (vimeo ? player.api("pause") : player.pauseVideo(), paused = !0), play_pause_switch() 
    }), $(".mute_unmute_btn").click(function() { 
    build_player(), muted ? (vimeo ? player.api("setVolume", .5) : player.unMute(), muted = !1) : (vimeo ? player.api("setVolume", 0) : player.mute(), muted = !0), mute_unmute_switch() 
    }) 
} 

function play_pause_switch() { 
    paused ? ($("#play_button").animate({ 
    opacity: .6 
    }, 500), $("#pause_button").animate({ 
    opacity: 0 
    }, 1e3)) : ($("#play_button").animate({ 
    opacity: 0 
    }, 1e3), $("#pause_button").animate({ 
    opacity: .6 
    }, 500)) 
} 

function mute_unmute_switch() { 
    muted ? ($("#mute_button").animate({ 
    opacity: .6 
    }, 500), $("#unmute_button").animate({ 
    opacity: 0 
    }, 500)) : ($("#mute_button").animate({ 
    opacity: 0 
    }, 500), $("#unmute_button").animate({ 
    opacity: .6 
    }, 500)) 
} 
var player, url, paused = !1, 
    muted = !0, 
    vimeo = !0; 

    $(function() { 

     var hear = document.getElementById("vimeoplayer"); 

     if(hear.paused) { 
      hear.play(); 
     } else { 
      hear.pause(); 
     } 

    }) 

    </script> 


</head> 
<body> 

    <audio id="vimeoplayer" controls> 
     <source src="whistle.mp3" type="audio/mpeg"> 
    </audio> 

</body> 
</html>