最近在做一個搖一搖抽獎小項目，碰到了要在抽獎不同階段響起該階段聲音。“開獎部分”，“搖晃”，“獲獎”，“未獲獎”四個階段，響起的聲音各不同。

在iOS5上，音頻文件只能從用戶觸發的觸摸（單擊）事件加載，如果在 HTML 標記中使用了 autoplay 屬性，那么 Safari 將會忽略這個屬性，并且不會在加載頁面時播放此文件，對于 preload 屬性，Safari 同樣會忽略。

唯一能解決的就是用戶進入頁面是，讓用戶觸發 touch 事件：

$("#choujiangBtn").unbind().bind("touchstart", function() {　　　
　　　　audioData.firstRock = true;　　 //點擊抽獎按鈕的時候，把audioData.firstRock 設為true,表示可以搖晃手機進行抽獎 　　　　
　　　　audioData.audio.load();　　　
　　　　playAudio();
});

audioData是一個存儲Audio的對象：

audioData = {
　　audio: new Audio("soundeff.mp3"),
　　firstRock: false,
　　start: {
　　　　startTime: 1,
　　　　length: 4
　　},
　　shake: {
　　　　startTime: 6,
　　　　length: 3
　　},
　　win: {
　　　　startTime: 12,
　　　　length: 3
　　},
　　miss: {
　　　　startTime: 16,
　　　　length: 1
　　}
}

在這里使用 audio sprite，將所有的音頻綜合到一個單音頻流中，然后播放此流的各個部分。是因為iOS Safari 中的 HTML5 媒體元素都是單例的，一次只能播放一個 HTML5 音頻（和 HTML5 視頻）流。

播放事件：

function playAudio() {
　　clearInterval(audioData.timer);
　　audioData.audio.addEventListener("canplaythrough", function() {
　　　　audioData.audio.play();
　　　　//重復播放開始部分,后面的幾個階段只播放一次
　　　　audioData.timer = setInterval(function() {
　　　　　　if (audioData.audio.currentTime >= (audioData.shake.startTime)/2&&audioData.audio.currentTime<audioData.shake.startTime) {
　　　　　　　　audioData.audio.currentTime = audioData.start.startTime;
　　　　　　}
　　　　}, 3000);
　　}, false);
}

播放 winAudio 同理。需要注意的是，更改 currentTime 并不是百分百正確的。假設 currentTime 設為 6.5，而實際得到的卻是 6.7。每個 audio sprite 之間需要少量的空間，以避免尋找到另一個 sprite 的頭部。

在訪問任何 audio sprite 之前，務必確保整個音頻流已加載，因為如果音頻流沒有完全加載，那么在想要訪問已加載的流的任何一個部分時，那么這個流需要進行緩沖，而且還會在流加載過程中發生延時。

當搖動手機事件：

window.addEventListener('devicemotion', function() {if (audioData.firstRock) {var acceleration = event.accelerationIncludingGravity; // 獲取設備的加速度x = acceleration.x; // 獲取加速度的x軸，用于計算水平水平加速度y = acceleration.y; // 獲取加速度的y軸，用于計算垂直方向的加速度，同時計算正玄值// 計算當前的加速度是否大于默認加速度if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {audioData.audio.currentTime = audioData.shake.startTime; //更改當前播放時間,播放搖動部分getValue(); //調用抽獎接口，判斷是否中獎audioData.firstRock = false; //把audioData.firstRock改為false狀態，不可再次搖動;clearInterval(audioData.timer); //清除循環播放開始部分聲音 }// 重新記錄最后一次值，作為下一次開始坐標lastX = x;lastY = y;};}, false);

根據getValue()得到的值判斷是否中獎：

　　　　　　if (num) {audioData.audio.currentTime = audioData.win.startTime; //更改當前播放時間,播放中獎部分//播放完中獎聲音片段，終止播放，防止繼續播放未中獎聲音片段setTimeout(function() {audioData.audio.pause();}, audioData.win.length);showPage2(num); //進入中獎頁面} else {audioData.audio.currentTime = audioData.miss.startTime; //更改當前播放時間,播放未中獎部分showPage3(num); //進入未中獎頁面};

?如果未中獎，點擊再抽一次按鈕，把audioData.firstRock 設為 true;進入首頁，重新搖動，進行再次抽取。

如果中獎，點擊填寫信息按鈕，進入個人信息填寫界面，完成抽獎。

轉載于:https://www.cnblogs.com/jianwen/p/4631016.html

總結

以上是生活随笔為你收集整理的摇一摇抽奖声音问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。