【JS】Audio要素をスマホでも上手く再生する方法

やりたい事は、ボタンを押したら初めて音楽流れ始めてループ再生させるだけ。

PCではうまくいくがスマホだとほとんどダメだった。
とりあえず下記だと上手くいった。
時間無いので下記コピペ。

JS

	// オブジェクトを生成
	var url = "./music.mp3";
	var audio = new Audio(url);
	//key music on
	$('#key .music').on('click',function(){

		// 実体ファイルをロード
		audio.load();

		// readyStateからロード状態を判断
		if (audio.readyState === 4) {
			audio.play();
		} else {
		// 再生可能状態でなければ再生可能状態になった時のイベント通知をセット
			audio.addEventListener('canplaythrough', function (e) {
				audio.removeEventListener('canplaythrough', arguments.callee);
				audio.play();
			});
		}
	});
	//ループ再生
	audio.addEventListener('ended',function(){
		this.currentTime = 0;
   		this.play();
	}, false);
   	audio.play();

HTML

<div id="key">
   <span class="music"><img src="img/btn_music.png" alt="BGMをオンにする" /></span>
</div>

<div id="music">
	<audio loop><source src="music.mp3" type="audio/mp3"><source src="music.wav" type="audio/wav"></audio>
</div>

下記のサイトが参考になった。

qiita.com