ios - Soundcloud iframe 不适用于 UIWebView swift

Question

我正在使用 iframe 和“Widget API”来控制流式传输。当我调用'Play();或“暂停()；”播放按钮正在改变但没有播放音频。

@IBOutlet weak var videoWebView: UIWebView!
var soundCloudIsLoaded : Bool = false
var isPlaying : Bool = false

override func viewDidLoad() {
    super.viewDidLoad()

    self.videoWebView.isUserInteractionEnabled = true
    self.videoWebView.allowsInlineMediaPlayback = true
    var htmlString = "<iframe id=\"sc-widget\" width=\"100%\" height=\"350\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&amp;color=ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;buying=false&amp;liking=false&amp;download=false&amp;sharing=false&amp;show_artwork=false&amp;show_playcount=false\" playsinline></iframe><script src=\"https://w.soundcloud.com/player/api.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">var duration = 0;var position = 0;var isLoaded = false;var isPaused = true;var widgetIframe = document.getElementById('sc-widget'), widget = SC.Widget(widgetIframe), newSoundUrl = '{{url}}';widget.load(newSoundUrl, { show_artwork: false, hide_related : true, show_comments : false, show_user : false, show_reposts : false, buying : false, liking : false, download : false, sharing : false, show_playcount : false});widget.bind(SC.Widget.Events.READY, function(){ isLoaded = true; widget.getDuration(function(dur){ duration = parseInt(dur); }); setInterval(function() { widget.getDuration(function(dur){ duration = parseInt(dur); }); widget.getPosition(function(pos){ position = parseInt(pos); }); }, 500);});widget.bind(SC.Widget.Events.PLAY, function(){ isPaused = false;});widget.bind(SC.Widget.Events.PAUSE, function(){ isPaused = true;});function Play() { widget.play();}function Pause() { widget.pause();}function Toggle() { widget.toggle();}function SeekTo(milliseconds) { widget.seekTo(milliseconds); widget.getPosition(function(pos){ position = parseInt(pos); }); }function getDuration() { return duration;}function getPosition() { return position;}function soundCloudIsLoaded(){ return isLoaded;}function IsPaused(){ return isPaused;}</script>"
    htmlString = htmlString.replacingOccurrences(of: "{{url}}", with: "URL")
    self.videoWebView.loadHTMLString(htmlString, baseURL: nil)
    self.videoWebView.delegate = self
}

@IBAction func playButtonAction(_ sender: Any) {
        if self.soundCloudIsLoaded {
            self.isPlaying = !self.isPlaying

            if self.isPlaying {
                let _ = self.videoWebView.stringByEvaluatingJavaScript(from: "Play();")
                self.playButton.setTitle("Pause", for: .normal)
            } else {
                let _ = self.videoWebView.stringByEvaluatingJavaScript(from: "Pause();")
                self.playButton.setTitle("Play", for: .normal)
            }
        }
}

func webViewDidFinishLoad(_ webView: UIWebView) {
    self.soundCloudIsLoaded = true
}

在 htmlString 中我有这段代码:

<iframe id="sc-widget" width="100%" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&amp;color=ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;buying=false&amp;liking=false&amp;download=false&amp;sharing=false&amp;show_artwork=false&amp;show_playcount=false"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">

var duration = 0;
var position = 0;
var isLoaded = false;
var isPaused = true;

var widgetIframe    = document.getElementById('sc-widget'),
    widget          = SC.Widget(widgetIframe),
    newSoundUrl     = '{{url}}';

widget.load(newSoundUrl, {
    show_artwork: false,
    auto_play : false,
    hide_related : true,
    show_comments : false,
    show_user : false,
    show_reposts : false,
    buying : false,
    liking : false,
    download : false,
    sharing : false,
    show_playcount : false
});

widget.bind(SC.Widget.Events.READY, function(){
    isLoaded = true;
    widget.getDuration(function(dur){
        duration = parseInt(dur);
    });
    setInterval(function() {
        widget.getPosition(function(pos){
            position = parseInt(pos);
        });
        widget.getDuration(function(dur){
            duration = parseInt(dur);
        });
    }, 500);
});

widget.bind(SC.Widget.Events.PLAY, function(){
    isPaused = false;
});

widget.bind(SC.Widget.Events.PAUSE, function(){
    isPaused = true;
});

function Play() {
    widget.play();
}

function Pause() {
    widget.pause();
}

function Toggle() {
    widget.toggle();
}

function SeekTo(milliseconds) {
    widget.seekTo(milliseconds);
    widget.getPosition(function(pos){
        position = parseInt(pos);
    });
}

function getDuration() {
    return duration;
}

function getPosition() {
    return position;
}

function soundCloudIsLoaded(){
    return isLoaded;
}

function IsPaused(){
    return isPaused;
}

</script>

这段代码以前工作正常，但在 IOS webView 上突然停止工作。这在桌面浏览器上运行良好。

Answer 1

只需将 UIWebView 替换为 WKWebView:

import UIKit
import WebKit

class ViewController: UIViewController {
    @IBOutlet weak var playButton: UIButton!
    var isPlaying : Bool = false
    var webView: WKWebView?


    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: self.view.bounds, configuration: webConfiguration)
        if let webView = webView {
            self.view.addSubview(webView)
            let viewBindingsDict = ["subView": webView]
            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat:"H:|[subView]|", options: [], metrics: nil, views: viewBindingsDict))
            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat:"V:|[subView]|", options: [], metrics: nil, views: viewBindingsDict))

            self.view.bringSubview(toFront: self.playButton)
            var htmlString = "<iframe id=\"sc-widget\" width=\"100%\" height=\"350\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&amp;color=ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;buying=false&amp;liking=false&amp;download=false&amp;sharing=false&amp;show_artwork=false&amp;show_playcount=false\" playsinline></iframe><script src=\"https://w.soundcloud.com/player/api.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">var duration = 0;var position = 0;var isLoaded = false;var isPaused = true;var widgetIframe = document.getElementById('sc-widget'), widget = SC.Widget(widgetIframe), newSoundUrl = '{{url}}';widget.load(newSoundUrl, { show_artwork: false, hide_related : true, show_comments : false, show_user : false, show_reposts : false, buying : false, liking : false, download : false, sharing : false, show_playcount : false});widget.bind(SC.Widget.Events.READY, function(){ isLoaded = true; widget.getDuration(function(dur){ duration = parseInt(dur); }); setInterval(function() { widget.getDuration(function(dur){ duration = parseInt(dur); }); widget.getPosition(function(pos){ position = parseInt(pos); }); }, 500);});widget.bind(SC.Widget.Events.PLAY, function(){ isPaused = false;});widget.bind(SC.Widget.Events.PAUSE, function(){ isPaused = true;});function Play() { widget.play();}function Pause() { widget.pause();}function Toggle() { widget.toggle();}function SeekTo(milliseconds) { widget.seekTo(milliseconds); widget.getPosition(function(pos){ position = parseInt(pos); }); }function getDuration() { return duration;}function getPosition() { return position;}function soundCloudIsLoaded(){ return isLoaded;}function IsPaused(){ return isPaused;}</script>"
            htmlString = htmlString.replacingOccurrences(of: "{{url}}", with: "https://soundcloud.com/hunterhayesofficial/rescue")

            webView.loadHTMLString(htmlString, baseURL: nil)
        }
    }

    @IBAction func playButtonAction(_ sender: Any) {
        self.isPlaying = !self.isPlaying

        if self.isPlaying {
            let _ = webView?.evaluateJavaScript("Play();") { [weak self] responce, error in
                guard error == nil else {
                    print("An error occured: \(String(describing: error?.localizedDescription))")
                    return
                }
                self?.playButton.setTitle("Pause", for: .normal)
            }
        } else {
            let _ = webView?.evaluateJavaScript("Pause();") { [weak self] responce, error in
                guard error == nil else {
                    print("An error occured: \(String(describing: error?.localizedDescription))")
                    return
                }
                self?.playButton.setTitle("Play", for: .normal)
            }
        }
    }
}