Audience Network Ad Audio Guide

When your app shows a video ad while playing music or video with sound, it is not an optimal user experience to mix with different sound sources. This can happen in the following scenario. A user chooses a music file to play from his album in the app. While the music is playing, a video ad in native or interstitial format is presented full screen to the app. The sound of the video ad and the music file will play at the same time. This will result an unpleasant and unexpected experience. To avoid this, you should implement the app following the Audience Network ad audio guide.

Prerequisites

Ensure you have completed the Native Ad (iOS) and Rewarded Video Ad (iOS) examples for iOS apps. Ensure you have completed Native Ad (Android) or Rewarded Video Ad (Android) examples for Android apps

Audio Guide for iOS

Audio Guide for Android

Audio Guide for iOS

1. We create an audio player instance that can play a music file when the view controller is loaded as following:

   @property (strong, nonatomic) AVAudioPlayer *audioPlayer;
   
   - (void)viewDidLoad
   {
       [super viewDidLoad];
    
       NSString *backgroundMusicPath = [[NSBundle mainBundle] pathForResource:@"BackgroundTheme" ofType:@"mp3"];
       NSURL *backgroundMusicURL = [NSURL fileURLWithPath:backgroundMusicPath];
       self.audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:backgroundMusicURL error:nil];
       [self.audioPlayer play];
   }

   
   
   
2. We create a native ad instance that will be loaded when loadNativeAd is called. For testing purposes, we can fetch a video test ad by initializing the placement ID with VID_HD_9_16_39S_APP_INSTALL#YOUR_PLACEMENT_ID. You should fill YOUR_PLACEMENT_ID with the one created from your app dashboard.
   
   Please refer to How to Use Test Mode for more information.

   @property (strong, nonatomic) FBNativeAd *_nativeAd;
   
   - (void)loadNativeAd
   {
       FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"VID_HD_9_16_39S_APP_INSTALL#YOUR_PLACEMENT_ID"];
   
       // Set a delegate to get notified when the ad was loaded.
       nativeAd.delegate = self;
   
       // Configure native ad to wait to call nativeAdDidLoad: until all ad assets are loaded
       nativeAd.mediaCachePolicy = FBNativeAdsCachePolicyAll;
   
       // Initiate a request to load an ad.
       [nativeAd loadAd];
   }

   
   
   
3. Implement ViewContorller with FBNativeAdDelegate and FBMediaViewDelegate.
   Declare adCoverMediaView property with FBMediaView type in order to show video ad.
   When nativeAdDidLoad is called to FBNativeAdDelegate, set nativeAd property to adCoverMediaView property in order to render the video ad. Please refer to Native Ad Integration for more details about showing the native ad in your app.
   
   Implement videoVolumeDidChange method defined in FBMediaViewDelegate delegate. When a video ad plays with sound, the volume will be greater than 0. The music file playing in your app can be paused. When the video ad has stopped, the volume will be 0 and your app can resume music file playing.

   @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
   @property (weak, nonatomic) IBOutlet FBMediaView *adCoverMediaView;
   @end
   
   #pragma mark - FBNativeAdDelegate
   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
       NSLog(@"Native ad was loaded, constructing native UI...");
   
       if (self._nativeAd) {
           [self._nativeAd unregisterView];
       }
   
       self._nativeAd = nativeAd;
   
       // Create native UI using the ad metadata.
       [self.adCoverMediaView setNativeAd:nativeAd];
       self.adCoverMediaView.delegate = self;
   
       // Follow Audience Network Native Ad implementation for creating and rendering other ad assets including ad icon, ad title, ad CTA button and more.
   }
   
   #pragma mark - FBMediaViewDelegate
   - (void)mediaView:(FBMediaView *)mediaView videoVolumeDidChange:(float)volume 
   {
       if (volume > 0) {
            // Pause music playing if video ad plays with sound
           [self.audioPlayer pause];
       } else {
           // Resume music playing 
           [self.audioPlayer play];
       }
   }

4. For bringing optimal user experience for showing the rewarded video ad, you should implement FBRewardedVideoAdDelegate in your View Controller. You should pause the music file playing before presenting the rewarded video ad in full screen. After the rewarded video ad is closed, you should resume the music file playing. Please refer to Rewarded Video Ad Integration for more details about showing the native ad in your app.
   
   

   @interface ViewController : UIViewController <FBRewardedVideoAdDelegate>
   @property (nonatomic, strong) FBRewardedVideoAd *rewardedVideoAd;
   @end
   
   - (IBAction)showAd
   {
       [self.audioPlayer pause];
       // Ad is ready, present it!
       [self.rewardedVideoAd showAdFromRootViewController:self animated:NO];
     }
   }
   
           
   - (void)rewardedVideoAdDidClose:(FBRewardedVideoAd *)rewardedVideoAd 
   {
       [self.audioPlayer play];
   }
     

   
   

Audio Guide for Android

1. We create a media player instance that can play a music file when the Activity is loaded as following:

   class AudioDemoActivity extends AppCompatActivity {
           
       protected  MediaPlayer mMediaPlayer;
   
       @Override
       protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           this.setContentView(R.layout.activity_native_ad);
   
           // Create MediaPlayer Instance by Audio File in the res/raw Folder
           this.mMediaPlayer = MediaPlayer.create(this, R.raw.background_theme);
           this.mMediaPlayer.start();
       }
   }
     

   
   
   
2. We create a native ad instance that will be loaded when loadNativeAd is called. For testing purpose, we can fetch for a video test ad by initializing the placement ID with VID_HD_9_16_39S_APP_INSTALL#YOUR_PLACEMENT_ID. You should fill YOUR_PLACEMENT_ID with the one created from your app dashboard.
   
   Please refer to How to Use Test Mode for more information.

   private NativeAd mNativeAd;
   
   protected void loadNativeAd() {
   
       NativeAd nativeAd = new NativeAd(this, "VID_HD_9_16_39S_APP_INSTALL#YOUR_PLACEMENT_ID");
   
       // Set AdListener to get notified when the ad was loaded.
       nativeAd.setAdListener(this);
   
       // Initiate a request to load an ad with cache all media.
       nativeAd.loadAd(NativeAd.MediaCacheFlag.ALL);
   }

   
   
   
3. Implement AudioDemoActivity with AdListener and MediaViewListener.
   Declare mAdCoverMediaView property with MediaView type in order to show video ad.
   When onAdLoaded is called to AdListener, set mNativeAd property to mAdCoverMediaView property in order to render the video ad. Please refer to Native Ad Integration for more details about showing the native ad in your app.
   
   Implement onVolumeChange method defined in AdListener. When a video ad plays with sound, the volume will be greater than 0. The music file playing in your app can be paused. when the video ad is stopped, the volume will be 0 and your app can resume music file playing.

   class AudioDemoActivity extends AppCompatActivity implements AdListener, MediaViewListener {
   
       protected MediaView mAdCoverMediaView;
   
       /**
        * Ad Listener Implementation
        */
       @Override
       public void onAdLoaded(Ad ad) {
   
           if (this.mNativeAd != null) {
               this.mNativeAd.unregisterView();
           }
   
           this.mNativeAd = (NativeAd) ad;
   
           // Create native UI using the ad metadata.
           this.mAdCoverMediaView.setNativeAd(this.mNativeAd);
           this.mAdCoverMediaView.setListener(this);
   
           // Follow Audience Network Native Ad implementation for creating and rendering other ad assets  including ad icon, ad title, ad CTA button and more.
       }
   
       /**
        * MediaViewListener Implementation
        */
       @Override
       public void onVolumeChange(MediaView mediaView, float volume) {
           if (volume > 0) {
               // Pause music playing if video ad plays with sound
               this.mMediaPlayer.pause();
           } else {
               // Resume music playing 
               this.mMediaPlayer.start();
           }
       }
   }

   
   
4. For bringing optimal user experience for showing the rewarded video ad, you should implement RewardedVideoAdListener in your activity. You should pause the music file playing before presenting the rewarded video ad in full screen. After the rewarded video ad is closed, you should resume the music file playing. Please refer to Rewarded Video Ad Integration for more details about showing the native ad in your app.

   class AudioDemoActivity extends AppCompatActivity implements RewardedVideoAdListener {
   
       protected MediaPlayer mMediaPlayer;
       protected RewardedVideoAd mRewardedVideoAd;
   
       /**
        * RewardedVideoAdListener Implementation
        */
       @Override
       public void onRewardedVideoClosed() {
           this.mMediaPlayer.start();
       }
   
       @Override
       public void onAdLoaded(Ad ad) {
           this.mMediaPlayer.pause();
   
           // Ad is ready, present it!
           this.mRewardedVideoAd.show();
       }
   }