1. 程式人生 > >krpano全景之解決微信內建瀏覽器不能自動播放音訊的問題

krpano全景之解決微信內建瀏覽器不能自動播放音訊的問題

上接前幾章krpano全景學習之路,開發過程中的思路是安裝網上看到的成功的案例進行開發的,該有的熱點啊、背景音樂啊、陀螺儀啊等等之類的,該有的全部都要背上。前面幾個問題倒是不大,背景音樂這卡住了。相信大多數人都會遇到這個問題,Android和電腦上除錯都沒有問題,自動播放音樂啊都是可以的,但是蘋果裝置這確實出現比較大的問題。

微信內建瀏覽器不能自動播放!

蘋果自帶的Safari瀏覽器預設是禁用html5的autoplay功能的,為的就是防止沒有必要的流量浪費,目測其他的移動端瀏覽器都有這樣的設定(我測的搜狗是不可以自動播放的),

必須要一次互動操作才可以播放音樂。

因為現在的使用者進入全景頁面的入口大部分都是在微信裡面,微信裡面開啟頁面必然會用到微信內建的瀏覽器。

那麼問題來了

蘋果的移動端裝置微信內建瀏覽器目前是不支援音訊自動播放的(我的微信版本是6.5.3,後面會不會做相容不得而知....)

咱們這次主要圍繞著蘋果移動端微信內建內建瀏覽器不能自動播放的問題來解決。

krpano中有layer設定的播放音樂的功能,但是同樣的在微信內建瀏覽器裡面還是不能自動播放。(然而需求來了... 就是就是就是不想多點一下!!必須自動播放!!)

只要你不是想我一樣專注於微信內建瀏覽器的話,那麼你真的可以考慮一下krpano自帶的背景音樂外掛功能。

-----------------------------------------------------程式碼分割線-------------------------------------------------------------------------------------------

首先開啟tour.html檔案

body裡面新增audio標籤

<audio preload="preload" autoplay id="audio" style="position: absolute; top: 20px;" src="1.mp3" controls="controls"></audio>


下面的關鍵了。因為是在微信內建的瀏覽器裡面,所以需要依託微信的平臺。

在頁面script裡面新增微信js-sdk的js檔案

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
var media = document.getElementById("audio");
wx.config({
    // 配置資訊
});
wx.ready(function () {
    media.play();
});
</script>

這種方式是不基於krpano的實現方式。

krpano官網裡面有關於背景音樂在iPhone和iPad的問題

Some HTML5 browsers doesn't support MP3 or MP4 audio files like the Flashplayer. There different audio formats like OGG or WAV need to be used. To provide several audio formats and let the plugin automatically choose the appropriate one, set the paths to all audio files at once and separate them by a pipe | character.
Example:
playsound(bg, 'sound.mp3|sound.ogg');
The technically possibilities with HTML5 are not same as with the Flashplayer. So when using the krpano HTML5 viewer not all features of the soundinterface plugin are supported.

Especially the 3D Sound features are not available here, as long as there is no volume panning available in HTML5 '3D Sound' will be not possible.

The Sound Object	is also not supported here at the moment.
iOS (iPhone / iPad) Notes

There are additional system limitations on iOS devices (iPhone and iPad):
No Autoplay / Autostart!
A sound can't start to play automatically! An user interaction is needed to start playing the sound, e.g. a touch on the screen by the user. The krpano soundinterface plugin automatically detects that situations and when the playing is not possible it automatically queues the playsound() command and waits for the next user interaction to start the sound automatically (e.g. when the user touches the screen to pan the pano or to click a button).
Only one sound at one time!
Only one sound file can be played at one time! When there is the new playsound() call the last sound will be automatically stopped.
No volume change!
Changing the volume of a sound is not allowed on iOS devices.
上面的內容簡單的翻譯一下:

有的h5瀏覽器是不支援MP3或者MP4的 你最好使用ogg或者wav檔案。巴拉巴拉巴拉....

NO AUTOPLAY/AUTOSTART 不能自動播放

Only one sound at one time 同一時間只能出現一個聲音

No volume change 不能調整聲音的大小。

上面是如果你使用krpano和蘋果移動端會遇到的限制性問題。

安卓裝置和電腦端目前是沒有這方面的問題。