XQuery/XHTML + 语音
外观
< XQuery
您希望使用浏览器内置的文本到语音转换扩展来让浏览器朗读推特更新。
Opera 浏览器支持 XHTML + Voice,安装了 Voice 扩展。在这个简单的应用程序中,它用作基于浏览器的文本到语音引擎。
此脚本创建了推特搜索的简单文本到语音版本。
- 窗口必须处于活动状态才能在刷新时播放 T2S。
- 要朗读的清理后的文本保存在一个 div 中,该 div 呈现为白色文本。最初它在标题中作为一个块输出,但似乎无法应用样式。应用样式 display:none 也隐藏了 T2S 引擎的文本!
- 将原子内容转换为适合朗读的字符串需要更多工作。
- 可以使用 levenstein 删除转发和类似的推文。
- 男性和女性声音由推文随机分配。我希望缓存分配给推文者的声音,以便推文始终以相同的声音朗读。
- 初始加载似乎没有触发播放,因此有了播放按钮,但这也重新获取了页面。
- 这是使用 AJAX 而不是刷新的理想情况。
- T2S 引擎在渲染文本方面相当不错,但它需要在某些地方得到帮助,例如用扩展形式替换短信缩写。
declare namespace atom = "http://www.w3.org/2005/Atom";
declare variable $n := xs:integer( request:get-parameter("n",6));
declare variable $search := request:get-parameter("search","");
declare variable $timestamp := request:get-parameter("timestamp",());
declare variable $seconds := $n * 12;
declare variable $noise :=
( "<b>",
"</b>",
"<.+?>",
"http://[^ ]+",
"#\w+",
"RT *@\w+",
"@\w+",
"[\[\]\\=«»:;()_?!~\|]",
'"',
"\.\.+"
);
declare function local:clean ($talk as xs:string, $noise as xs:string*) as xs:string {
if (empty($noise))
then $talk
else
local:clean(replace($talk,string($noise[1])," "),subsequence($noise,2))
};
declare function local:clean($talk as xs:string) as xs:string {
local:clean($talk,$noise)
};
declare option exist:serialize "method=xhtml media-type=application/xv+xml";
let $entries := doc(concat("http://search.twitter.com/search.atom?lang=en&q=",encode-for-uri($search)))//atom:entry
let $entries := if (exists($timestamp))
then $entries[atom:published>$timestamp]
else $entries
let $entries := $entries[position() <= $n]
let $newtimestamp := if (exists($entries)) then string($entries[1]/atom:published) else $timestamp
let $entries := reverse($entries)
return
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:vxml="http://www.w3.org/2001/vxml"
xmlns:xv="http://www.voicexml.org/2002/xhtml+voice"
xmlns:ev="http://www.w3.org/2001/xml-events"
>
<head>
<meta http-equiv="refresh" content="{$seconds};url=?search={encode-for-uri($search)}&timestamp={$newtimestamp}&n={$n}"/>
<title>Tweets matching {$search}</title>
<vxml:form id="say">
<vxml:block>
<vxml:prompt src="#news"/>
</vxml:block>
</vxml:form>
<link rel="stylesheet" type="text/css" href="voice2.css" title="Normal"/>
</head>
<body ev:event="load" ev:handler="#say" >
<h1>Twitter radio, listening to tweets matching {$search}</h1>
<form method="get" >
Listen for <input type="text" name="search" value="{$search}" />
Max items <input type="text" name="n" value="{$n}" size="4" />
<input type="submit" value="Tune"/>
<button ev:event="click" ev:handler="#say">Play</button>
</form>
{for $entry in $entries
return
<div>
<a href="{$entry/atom:author/atom:uri}">{substring-before($entry/atom:author/atom:name, "(")}</a>  
{util:parse(concat("<span xmlns='http://www.w3.org/1999/xhtml' >",$entry/atom:content/(text(),*),"</span>"))}
</div>
}
<div id="news">
{for $entry in $entries
return
<p class='{if (math:random ()< 0.5) then "male" else "female"}'>
{ local:clean($entry/atom:content/text())}
</p>
}
</div>
</body>
</html>
使用样式表
.male {
voice-family: male;
pause-after:1.5s;
}
.female {
voice-family:female;
pause-after:1s
}
#news {
color:white;
background-color:white
}