html5,audio標籤的autoplay="autoplay"在iphone上無法播放的問題
阿新 • • 發佈：2019-02-15
html5標籤audio的autoplay屬性可以設定在頁面開啟後自動播放。這個屬性本來挺好的。但是最近做了一個專案卻發現在iphone上無法自動播放。
各種查閱資料後發現原來iphone公司是考慮到使用者可能是用手機流量訪問的情況，為了使用者流量著想，所以需要使用者互動後才能播放。雖然蘋果公司是出於好心，但是如果網頁開啟之後還需要一個互動才能聽到美妙的背景音樂，那麼網站的體驗效果自然差了很多。可是這種問題要怎麼解決呢？
冥思苦想了很久，終於做了一個艱難的決定。於是乎就這樣嘗試了一下：
$(function(){
$("#audio")[0].play();
})
沒想到竟然好用！！！
全部的程式碼是這樣
<html>
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<audio id="audio" src="song.mp3" autoplay="autoplay">
您的瀏覽器不支援audio標籤。
</audio>
$(function(){
$("#audio")[0].play();
})
</body>
</html>
這裡需要注意的是.play()方法是element的方法，所以需要dom節點。
親測iphone可用。