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

5 learnings from a techie turned into a NFT artist

In September 2021 I chose to sell my crypto AI art business after two enriching (and often painful) years as a part-time sole founder. Today  AImade.art  is one of the best-selling AI art collections on Opensea . I want to share with you some of the key lessons I learned during this period: Work hard and get lucky.  And I got really lucky. On February 24th 2021 I had planned to shut down AImade.art , back then a business selling AI Art printed on canvas. I was discouraged after several months with no sales and my Shopify billing cycle was ending that day. Then something incredible happened: I missed the Shopify deadline and I sold an artwork one hour later. The buyer asked me: " Can I get it in as an NFT? ". I had absolutely no idea what an NFT was, but after a bit of research I found the concept so interesting that, two days later, I had pivoted the entire business to  NFT art made by AI . Sales started to pick up: I had finally found product-market fit . Impostor syndr

Learnings from "The 7 habits of highly effective people"

I just finished reading " The 7 habits of highly effective people ", a best-seller by Stephen R. Covey, that has inspired me in many levels. I am sharing some of the learnings I got, mostly as a personal bookmark, but hopefully this post can be useful for the community. Habit 1: Be Proactive It is not what happens to us, but our response to what happens to us that hurts us.  There is a space between stimulus and response, and the key to our growth and happiness is how we use that space. While reactive people feel victimized and out of control, proactive people have the power to choose how to respond to any circumstances (i.e., smiling with bad weather). We must focus our efforts on the things we can do something about, and accept what we can't change (past events, weather,...). Try replacing victimized language (i.e., " There is nothing I can do ", " I have to do it ",...) with proactive language (" Let's see all the options "