日常の進捗

主に自分のための,行為とその習慣化の記録

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 検索のページにアクセスすると音源が再生されるようになった。

コード

{
  "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);
});

リファレンス

stackoverflow.com

googlechrome.github.io