IMA HTML5 SDK 支援音訊廣告，設定方式與影片廣告類似，但有幾個主要差異。如需瞭解本指南未涵蓋的 IMA 設定部分，請參閱 HTML5 入門指南。
使用 <audio> 標記播放內容
AdDisplayContainer 的建構函式會採用名為 videoElement 的第二個引數，IMA 會將其追蹤為內容播放器。這個引數可接受 <video> 或 <audio> 標記。針對音訊內容和廣告，本指南建議使用 <audio> 標記建構 AdDisplayContainer。如果您有影片內容，可以使用 <video> 代碼，同時顯示音訊和影片廣告：
index.html
<audio id="audio-player"></audio>
<div class="ad-container"></div>
ads.js
audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);
隱藏 AdDisplayContainer
即使廣告或內容沒有顯示部分，IMA HTML5 SDK 仍需要 AdDisplayContainer。因此，建議您隱藏 AdDisplayContainer。請參閱以下元素隱藏方式範例：
style.css
.ad-container {
display: none;
}
自訂控制項
由於 AdDisplayContainer 已隱藏，因此需要自訂控制項才能在廣告插播期間處理播放作業。AdsManager 提供可用於實作這些自訂控制項的方法：
處理可略過的廣告
由於沒有可見的 AdDisplayContainer，IMA SDK 無法顯示「略過廣告」按鈕。如要處理可略過的廣告，請實作下列 IMA 方法：
以下範例程式碼示範如何執行這項操作。
ads.js
您可以設定 updateSkippable 函式，判斷是否可略過廣告，以及何時可略過廣告。您應針對每個 AD_PROGRESS IMA 事件呼叫此函式。如要瞭解如何設定 IMA 事件的監聽器，請參閱入門指南。
function onAdsManagerLoaded(adsManagerLoadedEvent) {
adsManager = adsManagerLoadedEvent.getAdsManager(
audioPlayer);
...
adsManager.addEventListener(
google.ima.AdEvent.Type.AD_PROGRESS,
onAdEvent);
...
}
function onAdEvent(adEvent) {
const ad = adEvent.getAd();
if (ad) {
currentAd = ad; // currentAd is defined outside of this functions scope.
}
switch (adEvent.type) {
...
case google.ima.AdEvent.Type.AD_PROGRESS:
// See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdProgressData
const adProgressData = adEvent.getAdData();
updateSkippable(
adProgressData.currentTime,
currentAd.getSkipTimeOffset()
);
break;
...
}
}
/**
* Called when there may be a change in the skippable state.
* @param {number} currentTime The current time of the
* currently playing ad.
* @param {number} skipTimeOffset The number of seconds of playback
* before the ad becomes skippable. -1 is returned for non skippable
* ads or if this is unavailable.
*/
updateSkippable(currentTime, skipTimeOffset) {
const isAdSkippable = skipTimeOffset !== -1;
const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
updateSkipUI(
isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
}
與影片廣告不同，IMA 無法為音訊廣告提供略過按鈕。開發人員必須為可略過的廣告新增自訂 UI，這可以透過簡單的 <button> 標記完成。這個 updateSkipUI 函式會根據廣告是否可略過、廣告目前是否可略過，以及廣告可略過前剩餘的時間，更新略過按鈕。它會使用 '.hidden' 類別，但 IMA 並未提供此類別。.hidden 類別會將 display: none; 新增至 <button>。
/**
* Updates the skip button UI.
* @param {boolean} isAdSkippable if the current ad is a skippable ad.
* @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
* @param {number} timeTillSkipInSeconds time until the ad can be skipped in
* seconds.
*/
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
if (isAdSkippable) {
skipButton.classList.remove('hidden');
if (isSkipCurrentlyAllowed) {
skipButton.textContent = 'Skip ad';
skipButton.disabled = false;
} else {
skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
skipButton.disabled = true;
}
} else {
skipButton.classList.add('hidden');
}
}
最後，請為使用者點選自訂略過按鈕時設定事件監聽器。如要略過廣告，請呼叫 adsManager.skip() 函式。
skipButton.addEventListener('click', () => {
adsManager.skip();
});
以下是設定 IMA SDK 以放送音訊廣告時，需要進行的主要變更。如要瞭解導入問題的解決方法，請前往 IMA SDK 技術論壇。