前提

あくまで私が調べた限りですが、pcもandroidもiosもユーザーからのアクションが一回はないと、音は出せません。(多分)

例えば

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8" />
    <body>
        <script>
            let sound = new Audio("./jump01.mp3");
            sound.load();
            sound.play();
        </script>
    </body>
</html>

このようにwebサイトに訪れたら、問答無用で音を鳴らすというのは、そもそもブラウザで制限がかかっていて音を出すことはできません。

つまり

以下のようにユーザーが意図してボタンを押した際などは、android,ios関係なく音を出すことができます

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8">
    <body>
        <button id="button">音出る</button>
        <script>
            (document.getElementById('button')).addEventListener('click', function(e) {
                e.preventDefault();
                let sound = new Audio("./jump01.mp3");
                sound.load();
                sound.play();
            });
        </script>
    </body>
</html>

そんで？

で、あくまで例ですが、以下のように、ボタン押すけど、音を出す目的でない場合で、別のアクションで音を出すような実装をすると、pc、androidは音出るんですが、iosだと出なくなってしまいます。

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8" />
    <body>
        <button id="button">ある要素を見つけたら音出る</button>
        <script>
            // 👇 ボタン押したら
            (document.getElementById('button')).addEventListener('click', function(e) {
                e.preventDefault();
                // 👇 適当な要素をbody内に埋め込む処理のみ実行
                const body = document.querySelector('body');
                const div = document.createElement('div');
                div.innerText = 'hello';
                div.id = 'hello';
                body.appendChild(div);
            });
            let is_played = false;
            // 👇 htmlを監視して、ボタンで追加された要素があったら音を鳴らす処理
            let interval_id = setInterval(() => {
                if (!is_played) {
                    let hello = document.getElementById('hello');
                    if (hello) {
                        let sound = new Audio("./jump01.mp3");
                        sound.load();
                        sound.play();
                        is_played = true;
                    }
                } else {
                    clearInterval(interval_id);
                }
            }, 1000);
        </script>
    </body>
</html>

音が出ん(´･ω･`)

こうすると鳴る

パターン1

ボタンが押された時にロードしておく

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8" />
    <body>
        <button id="button">ある要素を見つけたら音出る</button>
        <script>
            // 👇 soundを定義
            let sound = null;
            (document.getElementById('button')).addEventListener('click', function(e) {
                e.preventDefault();
                // 👇 ボタンを押した時にloadしちゃう
                sound = new Audio("./jump01.mp3");
                sound.load();

                const body = document.querySelector('body');
                const div = document.createElement('div');
                div.innerText = 'hello';
                div.id = 'hello';
                body.appendChild(div);
            });
            let is_played = false;
            let interval_id = setInterval(() => {
                if (!is_played) {
                    let hello = document.getElementById('hello');
                    if (hello && sound !== null) {
                        // 👇 音出す
                        sound.play();
                        is_played = true;
                    }
                } else {
                    clearInterval(interval_id);
                }
            }, 1000);
        </script>
    </body>
</html>

パターン2

ボタンが押された際に、ミュート(無音)で再生しちゃう

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8" />
    <body>
        <button id="button">ある要素を見つけたら音出る</button>
        <script>
            // 👇 soundを定義
            let sound = null;
            (document.getElementById('button')).addEventListener('click', function(e) {
                e.preventDefault();
                // 👇 ファイルを読み込んでミュートで再生しちゃう
                sound = new Audio("./jump01.mp3");
                sound.load();
                sound.muted = true;
                sound.play();

                const body = document.querySelector('body');
                const div = document.createElement('div');
                div.innerText = 'hello';
                div.id = 'hello';
                body.appendChild(div);
            });
            let is_played = false;
            let interval_id = setInterval(() => {
                if (!is_played) {
                    let hello = document.getElementById('hello');
                    if (hello && sound !== null) {
                        // 👇 再生時間を最初に戻す
                        sound.currentTime = 0;
                        // 👇 ミュートを解除して再生
                        sound.muted = false;
                        sound.play();

                        is_played = true;
                    }
                } else {
                    clearInterval(interval_id);
                }
            }, 1000);
        </script>
    </body>
</html>

iosでも音出たヽ(ﾟ∀ﾟ )ノ

参考

iPhoneのみaudioタグの音声が流れない問題を解決したい