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

Question

我制作了两个函数，一个用于录制声音，一个用于播放该声音。第一个工作正常。我可以看到设备中保存的录制文件，但录制后似乎无法播放，即使我获得了媒体文件的完整路径。

如果我像这样调用 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>

当我运行录音功能时，一切正常。当我尝试播放录制的文件时，我从回调中收到错误消息:code: 1 和 message: undefined

我在这里做错了什么？

Answer 1

您正在将文件保存在应用程序中。将文件保存在内存中。我已经修改了您的代码。您可以按如下方式使用它。并确保您已经安装了cordova文件插件。

// 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);
});