Audio file plays only once, simple example Tabrisjs 2.4

Question

I'm writing a very simple tutorial on how to play an audio file with Tabrisjs with this simple code which you can test in Playground. It works, but will only play the audio file once and I have to Reload it to have it play again. How do I get the audio to play more than once?

---

// simple example to play audio file

const {Button, ui} = require('tabris');
var my_media = new Media('http://static1.grsites.com/archive/sounds/cartoon/cartoon001.mp3');

let btnPlay = new Button({
  centerX: 0,  centerY: 0,
  text: 'Play sound',
  background: 'blue',
  textColor: 'white',
  font: '24px'
}).on("select", function() {
  my_media.play();
}).appendTo(ui.contentView);

---

Reference: - I'm trying to simplify the example tabrisjs.com provides

• This will play audio file correctly:

• MediaPage.js

• https://github.com/eclipsesource/tabris-js/tree/master/examples/cordova

Answer 1

This seems to do everything I want - including interrupting a sound that is playing. You can test on tabrisjs.com playground.

---

// simple example to play audio file
// ref: https://github.com/apache/cordova-plugin-media#readme

const {Button, ui} = require('tabris');

const SOUND_1 = 'http://static1.grsites.com/archive/sounds/cartoon/cartoon001.mp3';
const SOUND_2 = 'http://static1.grsites.com/archive/sounds/cartoon/cartoon002.mp3';
const SOUND_3 = 'http://static1.grsites.com/archive/sounds/cartoon/cartoon003.mp3';

let btnPlay1 = new Button({
  centerX: 0,
  top: 100,
  text: 'Play sound 1',
  background: 'blue',
  textColor: 'white',
  font: '24px'
}).on('select', function() {
  playAudio(SOUND_1)
}).appendTo(ui.contentView);

let btnPlay2 = new Button({
  centerX: 0,
  top: 'prev() 10',
  text: 'Play sound 2',
  background: 'red',
  textColor: 'white',
  font: '24px'
}).on('select', function() {
  playAudio(SOUND_2)
}).appendTo(ui.contentView);

let btnPlay3 = new Button({
  centerX: 0,
  top: 'prev() 10',
  text: 'Play sound 3',
  background: 'green',
  textColor: 'white',
  font: '24px'
}).on('select', function() {
  playAudio(SOUND_3)
}).appendTo(ui.contentView);


function playAudio(url) {
  // Play the audio file at url
  var my_media = new Media(url,
    // success callback
    function() {
      console.log('playAudio(): ' + url + ' Audio Success');
    },
    // error callback
    function(err) {
      console.log('playAudio(): ' + url + 'Audio Error: ' + err);
    }
  );
  my_media.play();
}

Answer 2

I tried your code, and it does play more than once, however the file won't play a second time until the first play finishes. If you want it to interrupt itself, i.e. play from the beginning every time the button is tapped, you'll need to modify your select handler to:

my_media.stop();
my_media.play();

---

The cordova-plugin-media docs detail all the methods available on the Media class.