Aug 16, 2013

Mary TTS Server and Safari

I don’t expect many people to find this post useful, since it’s a very specific problem. But, who knows, maybe it’ll be useful to someone, sometime. I can’t count the number of times that I found a blog giving a solution to a very particular problem I had. :-)

Quick disclaimers: 1) unfortunately, I won’t give you the solution because I don’t have it yet. 2) I’m telling you my suspicions after a day’s work. I’m not saying that everything I’m writing here is set in stone. My goal is just to get you thinking.

The issue is the following: I am trying to play an audio file in an iOS web app using the audio element. The problem is that this audio is not just any regular audio file. It is generated by Mary TSS, and served through it’s own server.

This is a simplified version of the HTML:

<audio src="http://localhost:59125/process?
LOCALE=en_US" preload autoplay />

Some comments about this code:

  1. This works on the desktop version of Safari
  2. Copying and pasting the src URL in the browser results in the correct download and execution of the audio
  3. If I replace the current src URL with a static file (in a different server), it correctly plays the audio in iOS’ Safari.
  4. The issues with iOS’s Safari not preloading and autoplaying are not to be considered, given that the scenario is the one I described in this other post.

Why doesn’t it play?

My main suspicion started because of the response’s content type. When I examined it on Safari’s Inspector, it would always say “Other”, when it should be “audio/x-wav”. Chrome would give me the right content type.

So I found this post on Stack Overflow. There is also this one.

It all boils down to the server accepting byte-range requests, as described in this Apple document. In there, there’s a quick test that can be done to determine if your server supports it or not:

curl --range 0-99 '' -o /dev/null

What this does is request only a range of bytes from a specific resource in a server. If the result looks like this:

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   100  100   100    0     0  18667      0 --:--:-- --:--:-- --:--:-- 33333

It means that only 100 bytes were downloaded from this resource, meaning that the range works.

If it returns something like:

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   243k  100   243k    0     0  18667      0 --:--:-- --:--:-- --:--:-- 33333

It means that it downloaded more than just 100 bytes, and therefore the server doesn’t support byte-range requests.

I ran this test on the two servers. One is the Web2py built-in server, and the other one was the MARY TTS server. Just as expected, Web2py’s returned only 100 bytes, while MARY’s returned the entire file.

This is where I’m at right now.

Aug 16, 2013

One consideration about iOS audio policies

In one of the projects I’m currently working on, I’m required to play audio files in a web application running on an iPod touch. Quite simple, huh? You just put an audio element on the page, set the src attribute, call load and play, right? Well, not quite that simple… Apple designed iOS’ Safari to only load and play files based on the user’s discretion. This means that to use load and play, it has to be done in response to a user’s click. There is a ‘sort of’ workaround for this, though. If your app uses:

<meta name="apple-mobile-web-app-capable" content="yes">
and the user saves it to his home screen, the page WILL have load, play, preload, autoplay, capabilities enabled. Thus, if you have a project in which you need finer control over audio (and video) elements on a web app running on an iOS device, this might be a simple way to achieve it.
Apr 4, 2013

Bible Stats Visualizer

Bible Stats VisualizerView the Project

It’s been quite some time, hasn’t it?

Well, I finally found some time to do some experiments and play around with new libraries. This time, the chosen one was D3.js.

This semester, I’ve been taking a Data Visualization course here at ASU. It’s a very interesting subject. The power you can have by visualizing information is enticing. Discovering patterns hidden in the data is very exciting. So, when a friend of mine here at ASU published his preliminary results on some analysis he did on the Bible’s books, I thought it would be nice to try out some of the techniques. The result is in this link. Since it was the work of one night, so there’s still a lot to improve.

The output of his analysis was: number of words in a book, and ratios on verbs, nouns and adjectives. If you’re interested in the analysis process itself, you can get more info on his website:

Here’s how the information was encoded:

  • number of words -> y-position
  • verb ratio -> circle radius (interactive)
  • noun ratio -> circle radius (interactive)
  • adjective ratio -> circle radius (interactive)

The ordering can be done in the traditional Bible arrangement, or relative to the currently chosen ratio.

Coloring was done qualitatively, but warm colors were chosen for the old testamente and cold colors for the new. This way, one can compare pre-attentively (or hopefully close to that) the proportion of old and new books in the chart.

What about conveying all three ratios at once on the screen? I’m sure it can be done. Maybe through composite pie charts or so. The issue is just making sure that there’s not too much information, and effectiveness of the visualization is lost.

In the future, I plan to add tooltips and maybe some different forms of visualizations. Some colors obviously need adjusting (they’re too close or too dark).

This project is on GitHub. This is my first project there, so this is also a learning experience. Here’s the repo:


Sep 3, 2012

* about my computer studies

This blog will go through some changes. Why?

Well, the simple reason is: there are many important things demanding my attention, resulting in less time spent studying HTML5 and its related technologies. But I’ve been studying many other things, and I believe this blog is very important to me, as a learning log and a public ‘portfolio’, and to others, who might benefit from something written in here.

So, what will I write about now? Basically, every interesting thing that comes up to me in this semester of studies. That involves HCI, Software Engineering, QA, design patterns, SOA and specially compilers. This last one will likely be the one that I talk about the most, since I’m currently attending CSE440 - Compiler Construction here at ASU and am currently developing a portuguese pseudo-code interpreter at my university in Brazil as my capstone project. This project uses ANTLR at its core, and the development is done with Java.

I have interesting topics in mind, and will be writing about them soon. :-)

Jun 15, 2012

Website charges 'tax' over IE 7 users

The Australian website is charging an extra fee for users who buy on their website using Internet Explorer 7. Talk about learning the hard way! Hehe!

They explain that this fee is to compensate for the extra work needed to make their website run on IE7.

From the legal point of view, is this ok? And will this make users change their browser during the purchase (having to redo the whole product-choosing cycle on the other browser), or will it simply make users give up un their purchase?

All issues aside, this was a pretty cool way of calling attention to this issue.

May 25, 2012

Yet another conference - Microsoft HTML5 Devcamp

I haven’t even written about the conference in SF yet, and am already attending another one. This time, it’s the Microsoft HTML5 Devcamp, here in the sunny and hot Phoenix.

It hasn’t started yet, but so far so good: free breakfast! :-)

P.S.: I’ll write about both conferences soon. But it’s important to note that they are a bit different: while the one in San Francisco was (mainly) for people who already knew (at least some) HTML5, presenting it’s multiple features, this one seems to be more introductory, presenting an introduction to HTML5 and CSS3, and some basic technologies.

May 21, 2012

HTML5 Developer Conference - San Francisco

So far, I’ve watched two talks: Doug Crockford’s and Giorgio Sardo’s (one of the guys behing

Doug’s wasn’t technical. It was entitled “What Would Crockford do”, and he basically talked about Yahoo’s situation, and what he would do if he was the companies next CEO.

Sardo’s was technical, but he only showed a couple of code snippets. He will have a more in-depth talk later on the day, in which he promised to share more code and answer many questions.

Later on (not today, though), I’ll talk more about each talk. I’m taking notes. :)

May 3, 2012

Books I read: Javascript: The Good Parts

You know a book is good when you keep reading it even when you’re on finals week. That’s what happened with Crockford’s Javascript: The Good Parts. His book is great.

This is the book’s table of contents:

  1. Good Parts
  2. Grammar
  3. Objects
  4. Functions
  5. Inheritance
  6. Arrays
  7. Regular Expressions
  8. Methods
  9. Style
  10. Beautiful Features
  11. Awful Parts (appendix A)
  12. Bad Parts (appendix B)
  13. JSLint (appendix)
  14. Syntax Diagrams (appendix)
  15. JSON (appendix)

First of all, a little about me. I have a good background with object oriented programming (basically with Java), and have been ‘programming’ with Javascript for a while. With this background, I’ve been able to read and understand basically everything he wrote in the book. My lack of experience with real Javascript programming, however, keeps me from seeing the big picture. So, this is certainly a book that I’ll read again later on my Javascript road.

Of the things that stood out to me, was all the talk about Javascript’s prototypal inheritance. This is a concept that I need to exercice more, given my background with ‘classical’ inheritance, as seen in Java.

Chapter 4 (functions) was pretty interesting. Javascript relies heavily in functions, so it’s important to understand some things about them. He talks about four invocation patterns (Method, Function, Constructor and Apply - all affecting the this pointer), the fact that Javascript does not have block scope (only function, meaning that if you declare a variable inside an if clause, for example, it’ll still be accessible from outside of the if), and the very interesting Closure. What’s this? Inner functions (function within a function - just like Inception’s dream within a dream) always have access to the parameters and variables of the functions that they’re defined in. Even after method execution. This can be used along with constructors to create private variables, something that many people think is not possible in Javascript.

I also liked Chapter 9 - Style. Nope, it has nothing to do with CSS, but with coding style. The chapter itself is pretty short, but I consider it to be directly connected with Chapter 10 and Appendix A and B. He gives some advices on how to to make your code speak. There are some pretty useful things, and some that many may consider a little too radical. He tells us not to use incremental or decremental operators (++ and —). While this may cause confusion in some circunstances, I honestly see no harm in writing index++; instead of index = index + 1;.

Lastly, the chapter about JSLint is also pretty sweet. He basically provides us with a tool that checks many things that he wrote there. But here is were a subtle problem lies. By using JSLint (which IS a great tool), his recommendations stop being recommendations and start becoming rules. You have to follow them, or your code will not do well on his tool. I brought up this theme a couple of posts ago, so just refer to this and that.

Anyway, this is an awesome book, that I will surely read again, later on my quest to be a front-end Jedi. I’m also pretty excited to see Crockford’s speech on the HTML5 Developer Conference later on this month. :-)

Now, I’ll hold Javascript back a little bit, and already have started reading Mastering CSS, Vol. 1, by Smashing Magazine. Seems a pretty good book, and wasn’t expensive at all. Although the title doesn’t explicitly state it, this book is really about CSS3’s new features. As usual, I’ll say a few words about it when I’m done with it.

May 3, 2012


Two posts ago, I talked about the cool website HTML5 Please. It basically is an abstraction over, providing you with simple a answer to if you should use a given feature or not.

But when you check the site by yourself, you’ll see that many APIs have the Use with Polyfill. Ok, sounds good. But…

What is a polyfill?

A Polyfill - a term coined by Remy Sharp -, is simply a way to fill the holes that some browsers leave on the new APIs, allowing you to use them as if nothing was wrong. Under the covers, they provide mechanisms compatible with those browsers - like flash, if available -, but expose it through the normal Javascript API that you’d expect to be available.

Here’s the article were Remy explains it.

And here’s a list of cross browser polyfills, brought to us by the awesome guys behind Modernizr.

Apr 30, 2012

* { box-sizing: border-box }

While skimming through Paul Irish’s blog, I found a very interesting article.

This is the situation: you set an elements width to, say, 300px. Then you set its padding to 50px. You save the file, reload the page, look at the result, curse it, and go back to the code to set the width to 250px. This happens because of how the box model works.

Basically, you can overcome this behavior with this simple line of code:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Haven’t tested it yet, but surely will.

Another cool detail is that people are always worried about using the * operator alone, due to performance issues. I had read that before, and always avoided it. Well, he says that it shouldn’t be on your top concerns. And, I guess I agree.

« To the past Page 1 of 4
Hi, my name is Victor Girotto, and I'm a Computer Science PhD student at Arizona State University. I'm currently engaged in activities with ASU's Motivational Environments research group. I obtained my BS in Computer Science at the Catholic University of Brasilia. In this blog, I'll be writing about the interesting things that I learn in school (or not), focusing on Human Computer Interaction, Web Front-end, Educational Technologies and, well, anything I feel like writing. Subscribe via RSS.