recorded mp3 cannot be played in webview: problem with mp3 content?

[jokro]

I have a file recorded with nativescript-audio. I can play it with nativescript-audio. However, I want to play it with webview. The problem is that the file recorded by nativescript-audio is not recognized as an mp3: in the webview the file appears empty and cannot be played.

I added the following code to your example of the audio recorder:

in xml: <WebView id="audioPlayer_webview" src="" ></WebView>

in tns file:

const show_audioPlayer = () => {
    var wv=<any>topmost().getViewById("audioPlayer_webview")
     let path=fs.knownFolders.currentApp().getFolder("audio");
     wv.src = `<audio id="control" controls autoplay>
                <source src= "${path}"  type="audio/mpeg" />
                </audio>` 
}

This code is working if I choose an existing mp3 file, not recorded by nativescript-audio. What's different/wrong with the recorde file ? I used android 8.0.0 on moto g6 for testing. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The full code in xml:

Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<StackLayout>
<ActivityIndicator color="#3489db" busy="{{ isRecording }}" />
<Button text="Start Recording" tap="start" />
<Button text="Stop Recording" tap="stop" />
<Button text="Get Recorded File" tap="getFile" />
<label text="{{ recordedAudioFile }}" color="#3489db" textWrap="true" />
<WebView id="audioPlayer_webview" src="" ></WebView>
</StackLayout>
</Page>

The full ts file:

var observable = require("data/observable");
var fs = require('file-system');
var audio = require("nativescript-audio");
var permissions = require('nativescript-permissions');
import { topmost } from "ui/frame"

var data = new observable.Observable({});
var recorder;

function onNavigatingTo(args) {
   var page = args.object;
   page.bindingContext = data;

   data.set('isRecording', false);
}
exports.onNavigatingTo = onNavigatingTo;

/* START RECORDING */

function start(args) {

   permissions.requestPermission(android.Manifest.permission.RECORD_AUDIO, "Let me hear your thoughts...")
 .then(function () {

   // you should check if the device has recording capabilities
   if (audio.TNSRecorder.CAN_RECORD()) {

     recorder = new audio.TNSRecorder();

     var audioFolder = fs.knownFolders.currentApp().getFolder("audio");

     var recorderOptions = {

       filename: audioFolder.path + '/recording.mp3',
       infoCallback: function () {
          console.log('infoCallback');
        },
       errorCallback: function () {
          console.log('errorCallback');
          alert('Error recording.');
        }
     };

    console.log('RECORDER OPTIONS: ' + recorderOptions);

    recorder.start(recorderOptions).then(function (res) {
       data.set('isRecording', true);
    }, function (err) {
        data.set('isRecording', false);
        console.log('ERROR: ' + err);
    });

   } else {
     alert('This device cannot record audio.');
   }

  })
   .catch(function () {
      console.log("Uh oh, no permissions - plan B time!");
   });
}
exports.start = start;

/* STOP RECORDING */

function stop(args) {
   if (recorder != undefined) {
     recorder.stop().then(function () {
     data.set('isRecording', false);
     alert('Audio Recorded Successfully.');
     show_audioPlayer()
   }, function (err) {
     console.log(err);
     data.set('isRecording', false);
   });
  }
}
exports.stop = stop;

interface PlayArgs{name?:string,path?:string,base64?:string}

const show_audioPlayer = () => {
    var wv=<any>topmost().getViewById("audioPlayer_webview")
     let path=fs.knownFolders.currentApp().getFolder("audio");
     wv.src = `<audio id="control" controls autoplay>
                <source src= "${path}"  type="audio/mpeg" />
                </audio>` 
}

function getFile(args) {
 try {
    var audioFolder = fs.knownFolders.currentApp().getFolder("audio");
    var recordedFile = audioFolder.getFile('recording.mp3');
    data.set("recordedAudioFile", recordedFile.path);
  } catch (ex) {
    console.log(ex);
  }
}
exports.getFile = getFile;`