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

前提・実現したいこと

「今日の肩書き診断」という名前でミニゲームWebアプリを作成しました。

その中で、ボタンを押下した後に再生される効果音を実装しています。
ルーレット機能で、スタート時とルーレット停止時の2回再生されるようにしています。

発生している問題・エラーメッセージ

ボタンを押下した後に再生される効果音を実装したのですが、PC、Androidでは音が再生されますが、
iPhoneのみ再生されません。
iPhoneではsafari、Chromeともにダメでした。

具体的にはルーレットスタート時の効果音はiPhoneでも再生されます。
しかし、ルーレットストップ時の効果音がiPhoneのみ再生されません。

実際のページは下記です。
今日の肩書き診断サイト

▼ルーレットスタート
PC：再生される
Android：再生される
iPhone：再生される

▼ルーレットストップ
PC：再生される
Android：再生される
iPhone：再生されない

該当のソースコード

javascript
1
2//ルーレットスタート時の再生処理
3$('#ルーレットスタートボタンID').click(function(){
4	$('#sound-file').get(0).play();
5	stop();
6});
7
8// ルーレットストップ時の再生処理
9function stop() {
10	// ルーレットストップ
11	setTimeout(function(){
12		$('#confirm').get(0).play();
13	}, 2800);
14}

※実際のコードとは少しちがいます。

HTML
1<!-- スタート音声ファイルの読み込み -->
2<audio id="sound-file" preload="auto">
3	<source src="sound_clicka.mp3" type="audio/mp3">
4	<source src="sound_clicka.wav" type="audio/wav">
5</audio>
6
7
8<!-- ストップ音声ファイルの読み込み -->
9<audio id="confirm" preload="auto">
10	<source src="sound_confirma.mp3" type="audio/mp3">
11	<source src="sound_confirma.wav" type="audio/wav">
12</audio>

mp3はPC、Android用。
wavファイルはiPhone用です。

補足情報

データの破損があるか確認しましたがPCでは正常に再生されます。
再生対象のデータは以下です。
実際の音声ファイル
※ブラウザで再生するときちんと再生されます。

hoshi-takanori

2021/02/04 17:54

タップ時に再生した audio element を再利用する必要があるようですが、jQuery を使った場合のやり方は分かりません。 https://qiita.com/pentamania/items/2c568a9ec52148bbfd08

miyabi_pudding

2021/02/05 03:03

playSilent() なんて便利なメソッドがあったんですか・・・。

miyabi_pudding

2021/02/05 03:12

あ、記事の著者さんの即席ライブラリでしたね。失礼しました。

行動規範の内容に同意します

回答1件

ベストアンサー

下記だとどうでしょうか？

javascript
1// 無音再生させとくため、先に要素を取得
2const stopSound = $('#confirm').get(0);
3
4//ルーレットスタート時の再生処理
5$('#ルーレットスタートボタンID').click(function(){
6    $('#sound-file').get(0).play();
7    // 先にストップ音を無音再生しておく
8    stopSound.muted = true;
9    stopSound.play();
10    stop();
11});
12
13// ルーレットストップ時の再生処理
14function stop() {
15    // ルーレットストップ
16    setTimeout(function(){
17        // ミュート解除
18        stopSound.muted = false;
19        // 再生時間を0に戻す
20        stopSound.currentTime = 0;
21        // 改めて再生
22        stopSound.play();
23    }, 2800);
24}