Skip to main content

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!

Popular posts from this blog

How to jump to time offsets in HTML5 video

Let's say that you have a 30-minute WEBM video file, from which you just want to play the following video segments , jumping from one to the other automatically  without interruptions : [00:01:25.00 - 00:02:25.00] -> from second 85 to 145 [00:11:40.00 - 00:11:55.00] -> from second 700 to 715 [00:20:26.00 - 00:21:07.00] -> from second 1226 to 1267 [00:26:11.00 - 00:28:01.00] -> from second 1571 to 1681 To increase the complexity, let's think that you have these video segments in a PHP variable $arrayVideoSegments  (normally the case if they were retrieved from the database).   $arrayVideoSegments[0]->startTime = 85   $arrayVideoSegments[0]->endTime = 145   $arrayVideoSegments[1]->startTime = 700   $arrayVideoSegments[1]->endTime = 715   $arrayVideoSegments[2]->startTime = 1226   $arrayVideoSegments[2]->endTime = 1267   $arrayVideoSegments[3]->startTime = 1571   $arrayVideoSegments[3]->endTime = 1681 The

The Ethics Canvas

In 2008, Alexander Osterwalder presented an innovative tool called " Business Model Canvas " (BMC) that aimed to help entrepreneurs to capture the fundamental business knowledge about their project, and bring about pivots in order to make the business model more consistent and successful.  Since then, the BMC has helped over 5 million entrepreneurs increase the value that they provide to their users, and find a sustainable model. In 2015, a group of researchers from ADAPT Centre  started using a similar approach in order to detect at early stage all the ethical implications of a project, and help entrepreneurs and researchers pivot their idea in order to minimise these issues. If you think about new technologies such as biotech, AI, IoT, VR, biometrics, blockchain, 3D printing,... they all bring great advancements for humanity, but they have some potential ethical issues that could have a catastrophic impact. After some months of hard work and experiments, we h

El Lean Canvas, explicado paso a paso

Tengo el honor de ser profesor del curso Startup Innovation Lab , del Plan de Empleo para la Educación Superior , en el que jóvenes canarios en situación de desempleo descubren las principales técnicas de emprendimiento siguiendo la metodología Lean Startup . Dado que no hay muchos ejemplos prácticos y en español sobre cómo completar el Lean Canvas , he creado un vídeo de 14 minutos en el que se explica, paso a paso, cómo completar el canvas utilizando Spotify como producto de ejemplo. Éste es el canvas resultante. Espero que sea de utilidad al igual que lo está siendo para mis alumnos.