Sunday, October 18, 2015

How to share remote audio files on social media using Phonegap

I wanted to create the iOS and Windows Phone versions of Xtegos using Phonegap, and the main problem I had was sharing audio files on Whatsapp.

There is a fantastic Cordova plugin called Social Sharing, developed by Eddy Verbruggen (thanks for your help), which makes things much easier, but it does not explain how to share audio files. This is how I did it on Javascript:

The function below assumes that your file is in a remote server. If this is not the case, the code is much simpler and you can remove all the XMLHttpRequest code.

function shareAudio() {
  var endpoint = 'http://www.example.com/yourFile.mp3;
  var client = new XMLHttpRequest();
  client.open('GET', endpoint, true); // Async call
  // Need to change the MimeType for this kind of binary content
  client.overrideMimeType("text/plain; charset=x-user-defined");
  client.onreadystatechange = function() {
    // When the progress is level 4 (ready) and the status is 200
    if (client.readyState == 4 && client.status == 200) {
      // Append the base64 header and the base64 response text from the server
      var base64audio = 'data:audio/mp3;base64,' stringToBase64(client.responseText);
      // Shares the audio file with a new name file.mp3 using Cordova plugin
      window.plugins.socialsharing.share(null, 'file.mp3', base64audio, null);
    }
  }
  client.send(); // Send the request
}

The function below simply transforms a string into Base64 format. Original code by Niko.
function stringToBase64(str) {
  var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  var out = "", i = 0, len = str.length, c1, c2, c3;
  while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;
    if (i == len) {
      out += CHARS.charAt(c1 >> 2);
      out += CHARS.charAt((c1 & 0x3) << 4);
      out += "==";
      break;
    }
    c2 = str.charCodeAt(i++);
    if (i == len) {
      out += CHARS.charAt(c1 >> 2);
      out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
      out += CHARS.charAt((c2 & 0xF) << 2);
      out += "=";
      break;
    }
    c3 = str.charCodeAt(i++);
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    out += CHARS.charAt(c3 & 0x3F);
  }
  return out;

}

In order to use the Social Sharing plugin you need to add the following line in the <head> of your index.html file:

<script type="text/javascript" src="cordova.js"></script>

And this other line in your Phonegap's config.xml file:
<gap:plugin name="org.apache.cordova.media" source="npm" />

<gap:plugin name="org.apache.cordova.network-information" source="npm" />
<gap:plugin name="cordova-plugin-x-socialsharing" source="npm" />
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" /> 

Now you will be able to share your audio files on Whatsapp, Facebook messenger, email, etc. Enjoy!

Tuesday, October 13, 2015

Xtegos: funny accents for your Whatsapp voice messages

It's a fact, we can't help smiling when someone orders a drink in Spanish with a very strong English accent, the same way English people smile when I ask for directions with my Spanish accent. However, we really appreciate their effort speaking a foreign language.
I wanted to know how would people react if they had an app to recreate these international accents and share them with their friends. That is why I spent 8.5h developing Xtegos, an Android app that enables users to read any text with nine different accents and share the result as a voice message on Whatsapp.

The interface is extremely simple, literally a text box, nine voice selectors, a button to listen and another one to share on Whatsapp. In the backend I am using Android TTS after trying out some other free text-to-speech APIs. The best thing about this native voice synthesizer is that you can use it even offline.

The voices currently available are: English, French, German, Brazilian, Italian, Russian, Spanish, Indian and Japanese. All of them are female voices, and the selector buttons are illustrated with innocent stereotype pictures.

This MVP (minimum viable product) is completed with a website, a Google Play page, a Twitter account and a Facebook page (to engage with early-adopters). Some people have asked me to develop an iOS version but, unfortunately, I cannot do that until the value proposition is validated or I would spend too much time maintaining both systems. The same applies to the app language: if it doesn't work for Spanish, it probably won't work in any other language.
This week I am devoting some time to promote Xtegos among my initial customer segment: Spanish boys and girls from 16 to 25 years old with Whatsapp. I will post in this blog what I learn in these experiments and the pivots I make.

Is there any feature that you would like to see implemented? Your feedback, questions and ideas are very much appreciated.