提问人:guest271314 提问时间:6/4/2017 更新时间:9/13/2019 访问量:2904
如何在chromium浏览器上创建文本或将文本转换为音频?
How to create or convert text to audio at chromium browser?
问:
在尝试确定如何在 chromium 上使用 Web 语音 API 的解决方案时? 发现
var voices = window.speechSynthesis.getVoices();
返回 identifier 的空数组。voices
不确定 chromium 浏览器缺乏支持是否与此问题有关 不行,谷歌:Chromium 语音扩展在间谍问题后被拉出?
问题:
1) 是否有任何解决方法可以实现在 chromium 浏览器上从文本创建或转换音频的要求?
2)我们开发者社区如何创建一个反映常见和不常见单词的音频文件的开源数据库;配上适当的标题?CORS
答:
已经找到了几种可能的解决方法,它们提供了从文本创建音频的能力;其中两个需要请求外部资源,另一个使用 meSpeak.js@masswerk。
使用从 Google 下载单词的音频发音中描述的方法,如果不编写 shell 脚本或执行检查是否发生网络错误的请求,就无法预先确定哪些单词实际上作为资源中的文件存在。例如,“do”一词在下面使用的资源中不可用。HEAD
window.addEventListener("load", () => {
const textarea = document.querySelector("textarea");
const audio = document.createElement("audio");
const mimecodec = "audio/webm; codecs=opus";
audio.controls = "controls";
document.body.appendChild(audio);
audio.addEventListener("canplay", e => {
audio.play();
});
let words = textarea.value.trim().match(/\w+/g);
const url = "https://ssl.gstatic.com/dictionary/static/sounds/de/0/";
const mediatype = ".mp3";
Promise.all(
words.map(word =>
fetch(`https://query.yahooapis.com/v1/public/yql?q=select * from data.uri where url="${url}${word}${mediatype}"&format=json&callback=`)
.then(response => response.json())
.then(({query: {results: {url}}}) =>
fetch(url).then(response => response.blob())
.then(blob => blob)
)
)
)
.then(blobs => {
// const a = document.createElement("a");
audio.src = URL.createObjectURL(new Blob(blobs, {
type: mimecodec
}));
// a.download = words.join("-") + ".webm";
// a.click()
})
.catch(err => console.log(err));
});
<textarea>what it does my ninja?</textarea>
维基共享资源分类:公共领域不需要从同一目录提供,请参阅如何检索维基词典单词内容?,wikionary API - 单词的含义。
如果知道资源的确切位置,则可以请求音频,尽管 URL 可能包含单词本身以外的前缀。
fetch("https://upload.wikimedia.org/wikipedia/commons/c/c5/En-uk-hello-1.ogg")
.then(response => response.blob())
.then(blob => new Audio(URL.createObjectURL(blob)).play());
不完全确定如何使用维基百科API,如何使用维基百科的API获取维基百科内容?,是否有干净的维基百科API仅用于检索内容摘要? 以仅获取音频文件。 需要解析以 结尾的文本的响应,然后需要对资源本身发出第二个请求。JSON
.ogg
fetch("https://en.wiktionary.org/w/api.php?action=parse&format=json&prop=text&callback=?&page=hello")
.then(response => response.text())
.then(data => {
new Audio(location.protocol + data.match(/\/\/upload\.wikimedia\.org\/wikipedia\/commons\/[\d-/]+[\w-]+\.ogg/).pop()).play()
})
// "//upload.wikimedia.org/wikipedia/commons/5/52/En-us-hello.ogg\"
哪些日志
Fetch API cannot load https://en.wiktionary.org/w/api.php?action=parse&format=json&prop=text&callback=?&page=hello. No 'Access-Control-Allow-Origin' header is present on the requested resource
当不是从同一来源请求时。我们需要再次尝试使用,但不确定如何制定查询以避免错误。YQL
第三种方法使用略微修改的版本来生成音频,而无需发出外部请求。修改是为了为方法创建适当的回调meSpeak.js
.loadConfig()
fetch("https://gist.githubusercontent.com/guest271314/f48ee0658bc9b948766c67126ba9104c/raw/958dd72d317a6087df6b7297d4fee91173e0844d/mespeak.js")
.then(response => response.text())
.then(text => {
const script = document.createElement("script");
script.textContent = text;
document.body.appendChild(script);
return Promise.all([
new Promise(resolve => {
meSpeak.loadConfig("https://gist.githubusercontent.com/guest271314/8421b50dfa0e5e7e5012da132567776a/raw/501fece4fd1fbb4e73f3f0dc133b64be86dae068/mespeak_config.json", resolve)
}),
new Promise(resolve => {
meSpeak.loadVoice("https://gist.githubusercontent.com/guest271314/fa0650d0e0159ac96b21beaf60766bcc/raw/82414d646a7a7ef11bb04ddffe4091f78ef121d3/en.json", resolve)
})
])
})
.then(() => {
// takes approximately 14 seconds to get here
console.log(meSpeak.isConfigLoaded());
meSpeak.speak("what it do my ninja", {
amplitude: 100,
pitch: 5,
speed: 150,
wordgap: 1,
variant: "m7"
});
})
.catch(err => console.log(err));
上述方法的一个警告是,在播放音频之前,加载三个文件大约需要 14 秒半。但是,避免外部请求。
对以下任何一个或两者都有好处:1)创建一个FOSS,开发人员维护的数据库或常见单词的声音目录;2)进行进一步开发,以减少三个必要文件的加载时间;并使用基于的方法来提供有关文件加载进度和应用程序准备情况的通知。meSpeak.js
Promise
根据该用户的估计,如果开发人员自己创建并贡献了一个在线文件数据库,该数据库以特定单词的音频文件进行响应,那将是一个有用的资源。不完全确定 github 是否是托管音频文件的合适场所?如果对此类项目表现出兴趣,将不得不考虑可能的选择。
评论