一、業務場景
微信中開啟H5頁面，滑動頁面，滑動到指定位置區間，播放對應的音訊，上下滑動頁面，可快速切到對應的音訊，然後播放。
二、實現方法
1、原理介紹
首先計算出設計圖的總高度，然後標註設計圖上的音訊切換點，算出切點所在的高度在整個設計圖高度中所佔的比例，最後根據比例算出實際頁面中切點的高度。
//切點配置資訊
let scrollConfigInfo = [{
top: 0,
bottom: 0.12,
audioUrl: "1.mp3",
pageNum: 1
},{
top: 0.12,
bottom: 0.167,
audioUrl: "2.mp3",
pageNum: 2
},{
top: 0.167,
bottom: 0.26,
audioUrl: "3.mp3",
pageNum: 3
},{
top: 0.26,
bottom: 0.428,
audioUrl: "4.mp3",
pageNum: 4
},{
top: 0.428,
bottom: 0.57,
audioUrl: "5.mp3",
pageNum: 5
}]
//滑動頁面控制音訊播放
const audio = new Audio();
let scrollY = 0;
let currentPage = 1; //初始化處於第一屏
let realPageAllHeight = 9221; //設計圖的頁面總高度
let realFirstPageHeight = 1317; //設計圖第一屏的高度
let pageHeight = $(".page-1").height(); //裝置上第一屏頁面的高度
let pageAllHeight = pageHeight * realPageAllHeight / realFirstPageHeight; //裝置上頁面總高度
$(window).scroll(() => {
scrollY = $(document).scrollTop(); //獲取當前滾動的高度
for (let i = 0 , len = scrollConfigInfo.length; i < len; i++) {
//當使用者劃到某個位置時，計算當前位置處於哪一個區間內，如果進入某個區間，就播放當前區間內的音訊
//currentPage !== (i + 1) 用來控制在一個區間內來回滑動不會來回重新播放該區間內的音訊
if (scrollY >= Math.floor(scrollConfigInfo[i].top * pageAllHeight) && scrollY < Math.floor(scrollConfigInfo[i].bottom * pageAllHeight) && currentPage !== (i + 1)) {
audio.src = scrollConfigInfo[i].audioUrl;
this.currentPage = scrollConfigInfo[i].pageNum;
audio.play();
break;
}
}
});
複製程式碼