HTML5音频无法在移动Chrome上播放

Question

我的html5音频可以在firefox上创建，但不能在chrome（android）中创建，并且也存在一些IOS chrome问题。有什么想法吗？谢谢。我查看了Android和iPhone触摸事件，但没有成功。我试图将它们添加到playdiv中...

脚本：

window.SetVolume = function(val) { 

var player = document.getElementById('myAudio');
var player = document.getElementById('myAudio');

console.log('Volume: ' + player.volume);
player.volume = val / 100;
console.log('Volume: ' + player.volume); 
}


function audioControl() {
 var playdiv = document.getElementById('playdiv');
 var pausediv = document.getElementById('pausediv');
 var myAudio = document.getElementById('myAudio');

if (myAudio.paused) {
  myAudio.play();
  pausediv.style.display = 'block';
  playdiv.style.display = 'none';

 } else {
 
  myAudio.pause();
  pausediv.style.display = 'none';
  playdiv.style.display = 'block';
 
 }
}

HTML部分：

<audio id="myAudio" preload="metadata">
  <source src="url-to-radio" />
</audio>

<button id="control" class="control" aria-label="Play" onclick="audioControl()"> 
  <div id="playdiv" aria-label="Play" style="display:block; width:100px;">
    <i class="fa fa-play" aria-hidden="true"></i>
  </div>

  <div id="pausediv" aria-label="Pause" style="display:none; width:100px;">
    <i class="fa fa-pause" aria-hidden="true"></i>
  </div>
</button>

<div id="player">
    <i class="vol fa fa-volume-down"></i> 
    <div id="volume"></div>
    <i class="vol fa fa-volume-up"></i>
</div>  

更多JS：

$("#volume").slider({
min: 0,
max: 100,
value: 30,
range: "min",
slide: function(event, ui) {
setVolume(ui.value / 100);
}
});

var myMedia = document.getElementById('myAudio');
$('#player').append(myMedia);
myMedia.id = "myAudio"; 

function setVolume(myVolume) {
var myMedia = document.getElementById('myAudio');
myMedia.volume = myVolume;
}