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 无法为音频广告提供“跳过”按钮。
开发者必须为可跳过的广告添加自定义界面，这可以通过简单的 <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 以投放音频广告所需的主要更改。如需有关实现问题的支持，请通过 Ad Manager 帮助中心寻求支持。