如何使用phonegap和javascript播放本地媒体文件?

时间:2016-09-13 08:59:56

标签: javascript android jquery html cordova

我做了两个功能,一个用于录制声音,另一个用于播放声音。第一个工作正常。我可以看到保存在我的设备中的录制文件,但即使我获得了媒体文件的完整路径,我也无法在录制后播放。

如果我这样调用playAudio()方法:

playAudio('http://filetoplay.com/some.mp3');

声音播放,但当我尝试使用它时:

playAudio(src_to_play);

它不起作用。

我录制的音频路径src_to_play如下所示:file:///android_asset/www/test_record.amr



// Get absolute file path on the device.
function getPhoneGapPath() {
  var path = window.location.pathname;
  var sizefilename = path.length - (path.lastIndexOf("/") + 1);
  path = path.substr(path, path.length - sizefilename);
  return path;
};

// Record audio
function recordAudio() {
  document.getElementById('media').style.display = 'block';
  var src = "test_record.amr";
  $('#src_to_play').val('file://' + getPhoneGapPath() + src);
  var mediaRec = new Media(src, onSuccess, onError);
  // Record audio
  mediaRec.startRecord();

  // Stop recording after 10 sec
  var recTime = 0;
  var recInterval = setInterval(function() {
    recTime = recTime + 1;
    console.log(recTime);
    setAudioPosition(recTime + " sec");
    if (recTime >= 10) {
      clearInterval(recInterval);
      mediaRec.stopRecord();
      console.log('rec stopped');
    }
  }, 1000);
}


// onSuccess Callback
function onSuccess() {
  console.log("recordAudio():Audio Success");
}

// onError Callback
function onError(error) {
  alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
  document.getElementById('audio_position').innerHTML = position;
}

// Audio player
var my_media = null;
var mediaTimer = null;

// Play audio
function playAudio(src) {
  // Create Media object from src
  my_media = new Media(src, onSuccessPlay, onErrorPlay);
  console.log(my_media);
  // Play audio
  my_media.play();

  // Update my_media position every second
  if (mediaTimer == null) {
    mediaTimer = setInterval(function() {
      // get my_media position
      my_media.getCurrentPosition(
        // success callback
        function(position) {
          if (position > -1) {
            setAudioPosition((position) + " sec");
          }
        },
        // error callback
        function(e) {
          console.log("Error getting pos=" + e);
          setAudioPosition("Error: " + e);
        }
      );
    }, 1000);
  }
}

// Pause audio
function pauseAudio() {
  console.log(my_media);
  if (my_media) {
    my_media.pause();
  }
}

// Stop audio
function stopAudio() {
  console.log(my_media);
  if (my_media) {
    my_media.stop();
  }
  clearInterval(mediaTimer);
  mediaTimer = null;
}

// onSuccess Callback
function onSuccessPlay() {
  console.log("audio is playing");
}

// onError Callback
function onErrorPlay(error) {
  alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
  document.getElementById('audio_position').innerHTML = position;
}
$('body').delegate('#play_audio', 'click', function() {
  var src_to_play = $('#src_to_play').val();
  playAudio(src_to_play);
});

<a href="#" style='position: relative;   z-index: 324234;   display: inline-block;  color: #fff;  padding: 10px;  width: 100%;' class="btn large" id='play_audio'> Play Audio</a>
<a href="#" style='position: relative;   z-index: 324234;   display: inline-block;  color: #fff;  padding: 10px;  width: 100%;' class="btn large" onclick="pauseAudio();">Pause Playing Audio</a>
<a href="#" style='position: relative;   z-index: 324234;   display: inline-block;  color: #fff;  padding: 10px;  width: 100%;' class="btn large" onclick="stopAudio();">Stop Playing Audio</a>
<input type='hidden' id='src_to_play' value=''>
<p id="audio_position" style='position: relative;   z-index: 324234;   display: inline-block;  color: #fff;  padding: 10px;  width: 100%;'></p>

<a href='#' style='position: relative;   z-index: 324234;   display: inline-block;  color: #fff;  padding: 10px;  width: 100%;' onclick="recordAudio();">RECORD AUDIO</a>
<p id="media" style='position: relative;   z-index: 324234;   display: none;  color: #fff;  padding: 10px;  width: 100%;'>Recording audio...</p>
<p id="audio_position" style='position: relative;   z-index: 324234;   display: inline-block;  color: #fff;  padding: 10px;  width: 100%;'></p>
&#13;
&#13;
&#13;

当我运行录音功能时,一切正常。当我尝试播放录制的文件时,我收到来自回调的错误说:code: 1message: undefined

我在这里做错了什么?

2 个答案:

答案 0 :(得分:1)

您正在将文件保存在app内。将文件保存在内部存储器中。我已修改您的代码。您可以按如下方式使用此项。并确保已安装cordova file plugin

// Record audio
function recordAudio() {
  document.getElementById('media').style.display = 'block';
  var src = cordova.file.externalRootDirectory+"test_record.amr";
  $('#src_to_play').val(src);
  var mediaRec = new Media(src, onSuccess, onError);
  // Record audio
  mediaRec.startRecord();

  // Stop recording after 10 sec
  var recTime = 0;
  var recInterval = setInterval(function() {
    recTime = recTime + 1;
    console.log(recTime);
    setAudioPosition(recTime + " sec");
    if (recTime >= 10) {
      clearInterval(recInterval);
      mediaRec.stopRecord();
      console.log('rec stopped');
    }
  }, 1000);
}


// onSuccess Callback
function onSuccess() {
  console.log("recordAudio():Audio Success");
}

// onError Callback
function onError(error) {
  alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
  document.getElementById('audio_position').innerHTML = position;
}

// Audio player
var my_media = null;
var mediaTimer = null;

// Play audio
function playAudio(src) {
  // Create Media object from src
  my_media = new Media(src, onSuccessPlay, onErrorPlay);
  console.log(my_media);
  // Play audio
  my_media.play();

  // Update my_media position every second
  if (mediaTimer == null) {
    mediaTimer = setInterval(function() {
      // get my_media position
      my_media.getCurrentPosition(
        // success callback
        function(position) {
          if (position > -1) {
            setAudioPosition((position) + " sec");
          }
        },
        // error callback
        function(e) {
          console.log("Error getting pos=" + e);
          setAudioPosition("Error: " + e);
        }
      );
    }, 1000);
  }
}

// Pause audio
function pauseAudio() {
  console.log(my_media);
  if (my_media) {
    my_media.pause();
  }
}

// Stop audio
function stopAudio() {
  console.log(my_media);
  if (my_media) {
    my_media.stop();
  }
  clearInterval(mediaTimer);
  mediaTimer = null;
}

// onSuccess Callback
function onSuccessPlay() {
  console.log("audio is playing");
}

// onError Callback
function onErrorPlay(error) {
  alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}

// Set audio position
function setAudioPosition(position) {
  document.getElementById('audio_position').innerHTML = position;
}
$(document).on('click','#play_audio', function() {
  var src_to_play = $('#src_to_play').val();
  playAudio(src_to_play);
});

答案 1 :(得分:0)

你不需要这里的游戏功能。你要做的是全局声明NSLayoutConstraint变量并点击该按钮播放它:

&#13;
&#13;
mediaRec
&#13;
&#13;
&#13;