プログラミング ホーム

wkwebviewで音声の再生を許可する - iPad + Swift3.0

2017年9月5日

0
0

環境

  • 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")
    }
}

 

参考

gitHub

iOSアプリ内のUIWebViewでHTML5オーディオを自動再生する。

iOS10: Auto play not working on WKWebView (requiresUserActionForMediaPlayback = false)

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-プログラミング, ホーム
-, , ,

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.