Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Bookmarklet to scrub and speak current URL via SpeechSynthesisUtterance. (Please use your own Readability API token).
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"2.0.3",function($,L){
//speak current webpage
//jhobbs 2013
function stop(){
speechSynthesis.cancel();
}
function pause(){
speechSynthesis.pause();
}
function resume(){
speechSynthesis.resume();
}
function getVoices(){
var voices = speechSynthesis.getVoices();
for(var i = 0; i < voices.length; i++ ) {
console.log("Voice " + i.toString() + ' ' + voices[i].name);
}
}
function play(articleText){
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
rate = 0.66;
} else {
rate = 1;
}
var speech = new SpeechSynthesisUtterance();
speech.rate = rate;
speech.pitch = 1;
speech.text = articleText;
speech.volume = 1;
speech.lang = "en-US";
speech.voiceURI = "Tom";
speech.onstart = function(event) { console.log('Started speaking.'); };
speech.onend = function(event) { console.log('Stopped speaking.'); };
speech.onpause = function(event) { console.log('Paused.'); };
speech.onresume = function(event) { console.log('Resumed.'); };
speech.onmark = function(event) { console.log('Reached mark.'); };
speech.onboundary = function(event) { console.log('Reached boundary.'); };
speechSynthesis.speak(speech);
var isPlaying = true;
}
var url = document.location.href.match(/(^[^#]*)/)[0];
var readabilityToken = "5e4bd6fa171a40332a638012122e475a26722d04";
var apicall = "https://readability.com/api/content/v1/parser?url="+url+"&token="+readabilityToken+"&callback=?";
console.log("Readability apicall: " + apicall);
$.getJSON(apicall, function(data) {
$("body").html("");
$("body").css("padding","5% 25%");
$("body").html("<div id='article-text'></div>");
$("#article-text").css("width","50%");
$("#article-text").css("font-family","Georgia, serif");
$("#article-text").append("<p><a href='#' onclick='play(articleText);'>Play</a> | <a href='#' onclick='stop();'>Stop</a> | <a href='#' onclick='pause();'>Pause</a> | <a href='#' onclick='resume();'>Resume</a></p>");
$("#article-text").append("<h2 id='article-headline'><strong>"+data.title+"</strong></h2>");
if(data.author){
$("#article-text").append("<p><strong>"+data.author+"</strong></p>");
}
if(data.date_published){
var pubDate = data.date_published;
$("#article-text").append("<p><strong>"+pubDate+"</strong></p>");
}
if(data.lead_image_url){
$("#article-text").append("<div id='lead_image_url'><img src='"+data.lead_image_url+"'/></div>");
$("#lead_image_url").css("display","inline");
$("#lead_image_url").css("float","right");
$("#lead_image_url").css("padding","0px 0px 8px 8px");
}
$("#article-text").append(data.content);
rawContent = data.content;
var scrubbedRawContent = rawContent.replace(/<(?:.|\n)*?>/gm, '');
articleText = data.title + $(data.content).text();
console.log(articleText);
getVoices();
play(articleText);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment