NativeScript 3.4/4.0 WebView播放JS声音不中断第三方音乐应用的实现咨询

没问题，这个需求的核心是让你的应用音频会话和后台音乐应用兼容，而不是抢占音频焦点。我帮你分iOS和Android两个平台，结合NativeScript 3.4/4.0的特性来实现：

iOS 平台配置 #

iOS的音频会话管理是关键，我们需要设置会话类别为允许与后台音频混合的模式。在NativeScript中，你可以在应用启动时或者WebView加载前配置：

import { isIOS } from "tns-core-modules/platform";

if (isIOS) {
    const AVAudioSession = AVFoundation.AVAudioSession.sharedInstance();
    try {
        // 选项1：遵循系统静音键，允许后台音乐继续播放
        AVAudioSession.setCategoryError(AVFoundation.AVAudioSessionCategoryAmbient);
        
        // 选项2：即使静音键开启也能播放提示音，同时兼容后台音乐
        // AVAudioSession.setCategoryWithOptionsError(
        //     AVFoundation.AVAudioSessionCategoryPlayback,
        //     AVFoundation.AVAudioSessionCategoryOptions.MixWithOthers
        // );
        
        AVAudioSession.setActiveError(true);
    } catch (err) {
        console.error("iOS 音频会话配置失败:", err);
    }
}

配置完成后，WebView中的JS播放音频会自动继承这个会话设置，不会中断Spotify等应用的播放。

Android 平台配置 #

Android需要通过音频属性和焦点管理来实现兼容，我们要请求**短暂且允许后台音乐降音（Duck）**的音频焦点，这样提示音播放时后台音乐只会暂时降低音量，不会被中断：

import { isAndroid, Application } from "tns-core-modules/platform";

// 封装一个播放提示音前的焦点处理函数
function prepareAndroidAudioFocus() {
    if (!isAndroid) return;
    
    const audioManager = Application.android.context.getSystemService(android.content.Context.AUDIO_SERVICE);
    const audioAttributes = new android.media.AudioAttributes.Builder()
        .setUsage(android.media.AudioAttributes.USAGE_ASSISTANCE_SONIFICATION) // 标记为提示音类型
        .setContentType(android.media.AudioAttributes.CONTENT_TYPE_SONIFICATION)
        .build();
    
    const focusRequest = new android.media.AudioFocusRequest.Builder(
        android.media.AudioManager.AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK
    )
    .setAudioAttributes(audioAttributes)
    .setOnAudioFocusChangeListener(new android.media.AudioManager.OnAudioFocusChangeListener({
        onAudioFocusChange: (focusChange) => {
            // 可以在这里处理焦点变化的逻辑，比如失去焦点时暂停提示音
            if (focusChange === android.media.AudioManager.AUDIOFOCUS_LOSS) {
                // 处理逻辑
            }
        }
    }))
    .build();
    
    const focusResult = audioManager.requestAudioFocus(focusRequest);
    return focusResult === android.media.AudioManager.AUDIOFOCUS_REQUEST_GRANTED 
        ? () => audioManager.abandonAudioFocusRequest(focusRequest) 
        : null;
}

WebView 与 NativeScript 通信播放 #

为了确保音频焦点逻辑正确触发，最好让WebView中的JS调用NativeScript的原生方法来完成焦点准备，再播放提示音：

步骤1：给WebView添加Native接口 #

在WebView所在的组件中，添加JS与Native的通信通道：

import { WebView } from "tns-core-modules/ui/web-view";

// 假设你的WebView实例叫webView
webView.on(WebView.loadFinishedEvent, (args) => {
    const webView = args.object as WebView;
    
    if (isAndroid) {
        // Android 添加JS接口
        webView.android.addJavascriptInterface(new class {
            @JavaMethod()
            prepareAndPlaySound() {
                const releaseFocus = prepareAndroidAudioFocus();
                if (releaseFocus) {
                    // 通知WebView播放声音
                    webView.android.loadUrl("javascript:playMyNotificationSound()");
                    // 播放完成后释放焦点（可以通过WebView回调或者延迟执行）
                    setTimeout(releaseFocus, 2000); // 假设提示音时长2秒
                }
            }
        }, "NativeAudioHelper");
    } else if (isIOS) {
        // iOS 添加脚本消息处理器
        const wkWebView = webView.ios as WKWebView;
        wkWebView.configuration.userContentController.addScriptMessageHandlerName(
            new class extends NSObject implements WKScriptMessageHandler {
                public userContentControllerDidReceiveScriptMessage(userContentController: WKUserContentController, message: WKScriptMessage): void {
                    if (message.name === "preparePlaySound") {
                        // iOS已配置好会话，直接通知WebView播放
                        wkWebView.evaluateJavaScriptCompletionHandler("playMyNotificationSound()", null);
                    }
                }
            },
            "preparePlaySound"
        );
    }
});

步骤2：WebView中的JS代码 #

在WebView的HTML/JS中，调用Native接口触发播放：

// WebView内的JS函数
function playMyNotificationSound() {
    const audio = new Audio('./notification.mp3'); // 替换成你的提示音路径
    audio.play();
}

// 对外暴露的播放函数，供业务逻辑调用
function triggerNotificationSound() {
    if (window.NativeAudioHelper) {
        // Android 调用Native接口
        window.NativeAudioHelper.prepareAndPlaySound();
    } else if (window.webkit?.messageHandlers?.preparePlaySound) {
        // iOS 发送消息给Native
        window.webkit.messageHandlers.preparePlaySound.postMessage(null);
    } else {
        // 降级处理
        playMyNotificationSound();
    }
}

关键注意点 #

• iOS的AVAudioSessionCategoryAmbient会遵循系统静音键，如果需要静音状态下也能播放提示音，改用AVAudioSessionCategoryPlayback并开启MixWithOthers选项。
• Android的AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK是最优选择，既保证提示音能播放，又不会完全中断后台音乐；如果希望后台音乐音量不受影响，可以测试AUDIOFOCUS_GAIN_TRANSIENT（部分设备可能仍会中断，需谨慎）。
• 确保你的提示音文件路径在WebView中可访问，或者将音频文件放在NativeScript的app/assets目录下，WebView通过相对路径访问。

内容的提问来源于stack exchange，提问作者Erik Andershed