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 disable cookies on Google Analytics so that you don't need a consent banner

The integration of Google Analytics into a website or blog is not GDPR-compliant by default . You must first obtain explicit consent of the end-users to store cookies, describing in your privacy policy how you intend to use collected personal data. This is the reason why most websites nowadays display an annoying (but necessary) consent banner. If you fail to do so or if you only ask for implicit consent, you are at risk of being fined. However, it is possible to disable cookies on Google Analytics (GA) respecting end-users privacy, so that you don't need to ask for consent. The downside is that you will not be able to distinguish the type of user (unique vs new vs returning) and you will miss some session insights. If these details are not relevant for you, here is how you do it. Disable Google Analytics cookies on a custom website If you have a custom website with full access to the source code, you can simply insert the script below between the <head>  and </head>...
Read more

How to convert a PWA into an Android app in 5 minutes

In early 2021 I developed a memory game called Kobadoo  as a PWA (Progressive Web App) using ReactJS. It works pretty well as a browser game and gets decent traffic, but I wanted to reach more potential users by making it available on the official mobile app marketplaces. Since I didn't want to spend any time coding a native app, the easiest solution I found was to convert the PWA into a TWA (Trusted Web Activities) app. It barely takes 5 minutes to do it. TWA essentially allows you to easily create an Android app ( .apk file) that displays a full-screen browser view of your PWA. The user experience is almost identical to a web app and the views from the TWA will count as traffic on your web app. This means that if you have ads on your PWA, they will still work (and generate revenue) from the TWA. Another advantage is that every update you make on the PWA will be immediately reflected on the TWA without the need to submit a new version on Google Play. Here's how I convert...
Read more

How to change a post thumbnail in Blogger

If you have ever published a post on Blogger with more than one image on it, you might know that the featured image  (also called post thumbnail ) that is displayed in your blog's landing page is always the first image in the post. Blogger does not provide an editor tool to change this thumbnail. However, there is a workaround that will enable you to set the image you want. Find the Image URL. You can do this by right-clicking on an image of your choice from your browser and selecting Copy image address . Note that it can be any image that is publicly available on the Internet, not only from your post. Changing your post HTML code. From Blogger editor tool, click on the pencil, then select HTML view . Add the following line at the very start of your HTML code: <img src=" https://www.example.com/image.png " style="display:none;"/> where the URL in red is the one you copied in step 1. Click on Publish . That's it! The chosen image will be displayed as ...
Read more