今天接到個(gè)H5活動(dòng)需求谤牡，需要一進(jìn)頁面就播放音頻效果在電腦端試了是可以的想许，但是一到手機(jī)端就不行了
1糜烹、audio:html5音頻標(biāo)簽
<audio id="audios" src="https://dn-qtshe.qbox.me/LAMPHO%20-%20%E7%9F%AD%E5%8F%91.mp3" autoplay controls="controls">您的瀏覽器不支持 audio 標(biāo)簽。</audio>
不支持audio元素的瀏覽器會(huì)顯示標(biāo)簽內(nèi)文字
src:音頻地址
autoplay:音頻加載完畢后自動(dòng)播放。
controls:顯示播放控制條绅项。
loop:播放完畢后會(huì)重復(fù)播放芳绩。
preload: auto 預(yù)加載音頻視頻。metadata 只預(yù)加載音頻視頻元數(shù)據(jù)鳍侣。 有autoplay時(shí)此屬性無效凿可。
2、js控制媒體
play()播放
pause()暫停
load()重新加載
3、微信端和手機(jī)不能支持自動(dòng)播放問題
原因是：android ios 內(nèi)部原因 為了節(jié)省流量续扔，規(guī)定不自動(dòng)播放音頻視頻
所以采用以下方式解決
//--創(chuàng)建頁面監(jiān)聽，等待微信端頁面加載完畢 觸發(fā)音頻播放
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
})
//--創(chuàng)建觸摸監(jiān)聽，當(dāng)瀏覽器打開頁面時(shí)，觸摸屏幕觸發(fā)事件粘招，進(jìn)行音頻播放
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})
青團(tuán)社招聘：
招聘崗位：高級(jí)前端開發(fā)工程師P5及以上
坐標(biāo)杭州市余杭區(qū)文一西路1380號(hào)金之源大廈11層
簡(jiǎn)歷投遞到：hr@qtshe.com || haochen@qtshe.com
職位描述：
1衰絮、建設(shè)工具、提煉組件、抽象框架，促進(jìn)前端工程化二汛、服務(wù)化婿着，持續(xù)提升研發(fā)效率，保障線上產(chǎn)品質(zhì)量
2挡篓、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)，指導(dǎo)落實(shí)解決方案
3妄讯、持續(xù)優(yōu)化前端頁面性能炕置，維護(hù)前端代碼規(guī)范甚纲，鉆研各種前沿技術(shù)和創(chuàng)新交互况既，增強(qiáng)用戶體驗(yàn)、開拓前端能力邊界
