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/js/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 函式會根據廣告是否可略過、目前可略過的廣告，以及在廣告可略過前還有多少時間，更新略過按鈕。系統會使用非 IMA 提供的 '.hidden' 類別。.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 技術論壇。