環境
- html5
- html
- HTML5
- HTML
- Javascript
- js
- audio
- wkwebview
- webview
- iPad
- Swift3.0
- swift
- SWIFT
やりたいこと
wkwebviewに描画したウェブアプリケーションの中でユーザーアクションに応じてhtml5 + Javascriptで実装した音声ファイルを再生させたい。普通に実装しても音声は再生されなかった。下記のようにapp側でちょっと工夫しないといけなかった。
実装
let url = "url入れて" lazy var wkwebView: WKWebView = { //WKWebViewのConfigurationを定義 let config = WKWebViewConfiguration() //iPadで音声の再生を許可する config.requiresUserActionForMediaPlayback = false //configuration: configで設定を読み込む var webView = WKWebView(frame: self.view.bounds , configuration: config) webView.uiDelegate = self webView.navigationDelegate = self webView.isUserInteractionEnabled = true return webView }()
ソース
import UIKit import WebKit class ViewController: UIViewController,WKNavigationDelegate,WKUIDelegate { let url = "url入れて" lazy var wkwebView: WKWebView = { //WKWebViewのConfigurationを定義 let config = WKWebViewConfiguration() //iPadで音声の再生を許可する config.requiresUserActionForMediaPlayback = false //configuration: configで設定を読み込む var webView = WKWebView(frame: self.view.bounds , configuration: config) webView.uiDelegate = self webView.navigationDelegate = self webView.isUserInteractionEnabled = true return webView }() lazy var progBar: UIProgressView = { var pro = UIProgressView(frame: CGRect(x: 0, y: 44, width: self.view.frame.width, height: 1)) pro.progress = 0.0 pro.progressTintColor = UIColor.green pro.trackTintColor = UIColor.gray return pro }() //ステータスバーを隠す override var prefersStatusBarHidden: Bool { return true } override func viewDidLoad() { super.viewDidLoad() self.view.addSubview(self.wkwebView) self.navigationController?.navigationBar.addSubview(self.progBar) self.wkwebView.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.new, context: nil) let request = NSURLRequest(url: URL(string:url)!) self.wkwebView.load(request as URLRequest) } override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) { if keyPath == "estimatedProgress" { self.progBar.alpha = 1.0 progBar.setProgress(Float(self.wkwebView.estimatedProgress), animated: true) if(self.wkwebView.estimatedProgress >= 1.0) { UIView.animate(withDuration: 0.3, delay: 0.1, options: UIViewAnimationOptions.curveEaseInOut, animations: { () -> Void in self.progBar.alpha = 0.0 }, completion: { (finished:Bool) -> Void in self.progBar.progress = 0 }) } } } func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { self.navigationItem.title = self.wkwebView.title } func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) { print("\(#function)") } func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) { } func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) { } func webViewWebContentProcessDidTerminate(_ webView: WKWebView) { } func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) { print("失败") } func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? { if !(navigationAction.targetFrame?.isMainFrame != nil) { self.wkwebView.load(navigationAction.request) } return nil } func webViewDidClose(_ webView: WKWebView) { } func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) { } func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) { } func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) { } override func viewWillDisappear(_ animated: Bool) { self.wkwebView.removeObserver(self, forKeyPath: "estimatedProgress") } }
参考
iOSアプリ内のUIWebViewでHTML5オーディオを自動再生する。
iOS10: Auto play not working on WKWebView (requiresUserActionForMediaPlayback = false)