Chrome拡張(3)特定のページで音源を再生する
前回の続き。特定のページで自作の音源ファイルを再生させたい。とする。試行錯誤しつつ、
DOMException: Failed to load because no supported source was found.
というエラーが出て音源が再生できない。
ファイルの読み込みが出来てなかったので、Chrome拡張のローカルファイルを参照する方法を調べた。var myAudioURL = chrome.extension.getURL("audio.mp3");
みたいな書き方でローカルファイルを読み込むみたいだった。が、それがつながってない感じだった。
検索して調べた所、アクセスするリソースファイルはmanifest.jsonに予め書いておく必要があるようだった。"web_accessible_resources": ["audio.mp3"]
みたいな感じで書く。追記・編集した拡張のmanifest.jsonとscript.jsは以下。
Google 検索のページにアクセスすると音源が再生されるようになった。
コード
- manifest.json
{ "name" : "Google Extension", "version" : "0.1", "manifest_version" : 2, "description" : "site specific extension works in google", "content_scripts" : [{ "matches" : ["http://www.google.co.jp/*","https://www.google.co.jp/*"], "js" : ["script.js"] }] , "web_accessible_resources": ["audio.mp3"] }
音源の再生は以前調べたものを改変した。Promiseについては今後調べる。
- script.js
var myAudio = new Audio(); // オーディオファイルのパスを取得 var myAudioURL = chrome.extension.getURL("audio.mp3"); // オーディオファイルの読み込み myAudio.src = myAudioURL; myAudio.load(); // 再生する関数 function startPlayback() { return myAudio.play(); } console.log('Attempting to play automatically...'); // promise startPlayback().then(function() { console.log('The play() Promise fulfilled! Rock on!'); }).catch(function(error) { console.log('The play() Promise rejected!'); console.log('Use the Play button instead.'); console.log(error); });