Zenn
🔉

Chromeでenchant.js の音を流す

2021/01/20に公開
2件
Chrome
JavaScript
enchant
tech

ポリシー変更によって、Chrome(ブラウザ)から音を鳴らすのが難しくなったみたいです。

Autoplay Policy Changes

はじめて学ぶ enchant.jsゲーム開発 を読んでたので困りました。

そこで色々いじって音が鳴らせるようになったので備忘録。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        body {margin: 0;}
    </style>
</head>
<body>
    <audio id="audio" muted autoplay></audio>
    <button id="unmuteButton">Click to start</button>
    <iframe src = "dummy.html" id="inside" width="560" height="315" frameborder="0" allow="autoplay" allowfullscreen></iframe>
    
    <script>
    unmuteButton.addEventListener('click', function() {
    audio.muted = false;
    document.getElementById('inside').src = "game.html"
    console.log("loaded");
    });
    </script>
</body>
</html>
dummy.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body {margin: 0;}
    </style>
</head>
<body>
</body>
</html>
game.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-status-bar-style" content="block-translucent">
    <title>enchant</title>
    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="nineleap.enchant.js"></script>
    <script type="text/javascript" src="game.js"></script>
    <style type="text/css">
        body {margin: 0;}
    </style>
</head>
<body>
</body>
</html>

ゲーム本体は"game.js" に書いてあります。

https://twitter.com/TomiyaAkio/status/1351764125265895424

こんな感じになります。

Discussion

HyrodiumHyrodium

Julia好きとしてお気持ちは分かるのですが、タイトルのenchant.jlはenchant.jsのtypoのようですね😺