用Android WebView播放html audio
阿新 • • 發佈：2018-12-30
專案需求是客戶端使用webview顯示html內容，html網頁部分包括音訊，後臺使用audio標籤顯示音訊，一開始在android webview上顯示黑框，也不能播放音訊（有的手機可以，有的手機不行，我用小米2和三星N7108測試的都不可以）
程式碼如下：
<audio src="http://www.scottandrew.com/mp3/syfy/01%20-%20Scott%20Andrew%20-%20More%20Good%20Days.mp3" controls="controls"></audio>查了資料，controls：唯一可選值為controls，出現controls屬性並準確賦值時，音訊播放控制元件將會顯示，控制元件包括：播放、暫停、定位、音量、全屏切換、字幕（如果可用）、音軌（如果可用）。
分析可能android 瀏覽器對audio支援的不好，
然後嘗試儘量相容瀏覽器的寫法：
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>測試仍然顯示黑框，但是點選黑框可以播放/暫停音訊
然後嘗試用div+css控制播放器介面，jquery控制音訊播放，最終實現webview播放audio的效果
完整程式碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { var aud = $("#aud").get(0); aud.pos = -1; $('#play_button').bind('click', function(evt) { evt.preventDefault(); if(aud.paused){ aud.play(); } else{ aud.pause(); } }); aud.addEventListener('canplay', function(evt) { aud.play(); }); }); </script> </head> <body> <div id="player"> <img id="play_button" src="http://d.hiphotos.baidu.com/image/w %3D2048/sign=74680e7daf345982c58ae29238cc30ad/f2deb48f8c5494ee13aa95102ff5e0fe99257e2b.jpg" style="width:50px;height:50px;"/> </div> <audio id="aud" src="http://www.scottandrew.com/mp3/syfy/01%20-%20Scott%20Andrew%20-%20More%20Good%20Days.mp3" autoplay="autoplay"></audio> </body> </html>
使用webview的問題：
1. webview預設白色背景問題
2.x設定 mWebView.setBackgroundColor(0);
4.0以上這樣設定就失效了，是因為硬體加速導致的，需要關閉硬體加速，可以在manifest檔案中設定 android:hardwareAccelerated="false"
2. 滑動時閃爍
關閉硬體加速就能解決
另外：根據android官方介紹，webview要顯示video，需要開啟硬體加速，那麼在顯示video時滑動，怎麼解決閃爍問題？