html5的audio，audio.play()在手机浏览器中不能自动播放

1：这个是已知的bug,尤其是在苹果的手机上。android手机上可以。

2：无法避免，必须要手工点击后，方可以开始播放。

3：苹果据说不准备对这个进行更改。

第一步是通过摇动手机来改变颜色

！doctype html html head meta charset=' utf-8 '/meta name=' viewport ' content=' width=device-width，Initial-scale=1.0'/titleHTML5手机震动/title脚本类型=' text/JavaScript ' var color=new array(' # fff '，' # ff0 '，' # f00 '，' # 000 '，' # 00f '，' # 0ff ')；if(窗口。DeviceMotionEvent){ var speed=25；var x=y=z=LasTx=LasTy=LasTz=0；window . addeventlistener(' device motion '，function(){ var acceleration=event . accelerationincluding gravity；x=加速度. x；y=加速度. y；if(Math.abs(x-lastX)速度|| Math.abs(y-lastY)速度){ document . body . style . background color=color[math . round(math . random()* 10)% 6]；} LasTx=x；lastY=y；}，false)；}/脚本/头身摇动手机更改屏幕颜色。/body /html主要是手机的DeviceMotionEvent事件

第二步，微信晃一下手势

与第一步相比，增加了晃动手势，改变了晃动事件。在摇动后添加您想要的方法，无论您想要进入下一页还是触发控制器事件。

“% @”页面内容类型=' text/html；字符集=UTF-8 '语言=' Java ' % html头元http-equiv=' Content-Type '内容=' text/html；字符集=UTF-8 '元字符集='UTF-8 '元名称='视口'内容='宽度=设备宽度，初始比例=1.0,最大比例=1.0 '标题摇一摇/title link rel='样式表href='插件/柳良宝/shake/css/shake.css' rel='外部nofollow' link rel='样式表href='插件/柳良宝/shake/css/myDialog.css' rel='外部' nofollow '脚本类型=' text/JavaScript ' src=' http :插件/柳良宝/SHAKE/js/jquery。量滴js /脚本脚本类型=' text/JavaScript var last _ update=0；var last _ time=0；var x；var y；var z；var last _ x；var last _ y；var last _ z；var sound=new Hall({ URLs :['/shake/sound/shake _ sound。MP3 ']}).load()；var find sound=new Hall({ URLs :['/shake/sound/shake _ match。MP3 ']}).load()；var curTimevar isShakeble=true函数init() { if (window .DeviceMotionEvent){ window。addeventlistener(' devicemotion '，deviceMotionHandler，false)；} else { $('#cantshake ').show()；} }函数deviceMotionHandler(事件数据){ Curtime=new Date().getTime()；var DiffTime=Curtime-last _ update；if(diffTime 100){ var加速度=事件数据。加速度，包括重力；last _ update=curTimex=加速度。x；y=加速度。y；z=加速度。z；var速度=数学。ABS(x y z-last _ x-last _ y-last _ z)/DiffTime * 10000；if(speed SHAKE _ THreshold Curtime-last _ time 1100 $(' # loading ').attr(' class ')==' loading ' is hakkable){ shake()；} last _ x=xlast _ y=ylast _ z=z} }函数shake(){ last _ time=Curtime；$("#正在加载")。attr('class '，' loading loading-show ')；$(' #震动').animate({ top: '10%' }，700，function () { $('#shakeup ').animate({ top: '25%' }，700，function () { $('#loading ').attr('class '，' loading ')；找到声音。play()；//在此为摇动之后的事件，这里为调用ControllergoShakeResult方法窗户。位置。href='摇动控制器。做什么？goShakeResultphoneNumber=$ { phoneNumber } hdid=$ { hdid } OpenID=$ { OpenID } '；})})$(' #安定')。animate({ top: '40%' }，700，function(){ $(' # shadow ')).animate({ top: '25%' }，700，function(){ })；})声音。play()；} //各种初始化$(文档)。ready(function(){ howler。IOs自动启用=false快速点击。附上(文件。身体)；init()；})/script/head body table id=' container ' t body tr TD class=' container ' col span=' 2 ' div id=' shake ' img src=' http : plug/Liu Liang Bao/shake/images/inner。png ' class=' inner ' img src=' http : plug/刘良宝/shake。png ' class=' shake _ up ' id=' shake up ' img src=' http :插件/刘良宝您今天还可以摇输入id='shakeCount '名称='shakeCount '值='${leftcount} '次TD/tr/tr正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了td /tr /tbody /table /body /html有时候真的可以换一种方法去实现自己想要的功能。附图：演示本来实现的效果是：

这里我们可以使用JS来进行控制，代码如下：

var audio

window.onload = function(){

initAudio()

}

var initAudio = function(){

//audio = document.createElement("audio")

//audio.src='Never Say Good Bye.ogg'

audio = document.getElementById('audio')

}

function getCurrentTime(id){

alert(parseInt(audio.currentTime) + '：秒')

}

function playOrPaused(id,obj){

if(audio.paused){

audio.play()

obj.innerHTML='暂停'

return

}

audio.pause()

obj.innerHTML='播放'

}

function hideOrShowControls(id,obj){

if(audio.controls){

audio.removeAttribute('controls')

obj.innerHTML = '显示控制框'

return

}

audio.controls = 'controls'

obj.innerHTML = '隐藏控制框'

return

}

function vol(id,type , obj){

if(type == 'up'){

var volume = audio.volume + 0.1

if(volume >=1 ){

volume = 1

}

audio.volume = volume

}else if(type == 'down'){

var volume = audio.volume - 0.1

if(volume <=0 ){

volume = 0

}

audio.volume = volume

}

document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume)

}

function muted(id,obj){

if(audio.muted){

audio.muted = false

obj.innerHTML = '开启静音'

}else{

audio.muted = true

obj.innerHTML = '关闭静音'

}

}

//保留一位小数点

function returnFloat1(value) {

value = Math.round(parseFloat(value) * 10) / 10

if (value.toString().indexOf(".") <0){

value = value.toString() + ".0"

}

return value

---