Using content script to inject audio
I have a content script which reads data and using google tts service gets the output audio. The problem concerns injecting script through extension
When i inject the audio element through javascript I see the right url being called and audio element appended . But it doesnt play . I have set autoplay attribute .
Snippet I am using
var url = 'http://translate.google.com/translate_tts?tl=en&q=' + encoded;
console.log(url);
var audio = new Audio();
audio.setAttribute('src',url);
audio.setAttribute('autoplay');
var t = document.getElementById(开发者_高级运维'doc');
if(t.appendChild(audio)){
console.log('appended');
}
https://chrome.google.com/webstore/developer/detail/dhfpnmpbgjadmhggjeajdfmkcclckeim
I also didn't have any luck with Mr. Mansour's load and play recommendation. I think the issue here is that you both got half of it right: a) set autoplay to true, and b) just do it in the background page.
For example, I got this background page to run just fine:
<!doctype html>
<html>
<body>
<script type="text/javascript">
var url = "http://translate.google.com/translate_tts?tl=en&q=Background";
var audio = new Audio(url);
audio.autoplay = true;
</script>
</body>
</html>
Note also that I never appended the element to the document; if you have no luck there you can always tack on an appendChild and see if that makes a difference.
Also, I think your original code should work just fine -- even if an element with ID doc doesn't exist -- if you throw it in the background page.
Some more notes
For some weird reason, "correcting" the ampersand to & instead of & breaks it for me. Awkward, but just a caution to others.
Also, if you just open the console and paste in the three lines of JavaScript from above, it probably won't work -- unless you're in a special page like the New Tab page, an extension options page, or, you guessed it, an extension background page. I'm not sure why this is so, but Chrome may have restrictions on who can inject audio content and have it play. I don't know why this would be so, or whether it's intentional or unintentional. Just another caveat in working with HTML5, I guess.
Well, you don't need to append child, and do it from the background page:
var audio = new Audio(url);
audio.load();
audio.play();
That should work, load it in the JavaScript and it will play.
The problem is that you cannot load audio through content script . This can however be achieved using background page .
One workaround that is not listed here is this one : You could inject your audio in the page and control from the content script.
manifest.json
{
"manifest_version": 2,
"name": "script",
"version": "1.0",
"content_scripts": [
{
"matches": [
"https://example.com/"
],
"js": [
"inject.js",
"content.js"
]
}
],
"web_accessible_resources": [
"audios/*"
]
}
Note: don't forget to include your audios in web_accessible_resources.
inject.js
const audio = new Audio(chrome.runtime.getURL('audios/notification-sound.mp3'))
audio.id = 'injected-audio'
document.body.appendChild(audio)
content.js
function notify () {
document.querySelector('#injected-audio').play()
}
notify()
I think it's clean way, this way you can play your sound whenever you want.
加载中,请稍侯......
精彩评论