Phonegap / Cordova กับ เสียง

วันนี้ได้ลองแก้ปัญหาการเล่นไฟล์เสียงโดยคลิกที่รูปครับ ซึ่งถ้าเป็นเว็บธรรมดาก็สามารถ link ไฟล์เสียงเข้ากับรูปโดยตรง แต่สำหรับ hybrid app ที่ใช้ phonegap อาจจะต้องใช้โค้ดตามคู่มือดังนี้ http://docs.phonegap.com/en/2.9.0/cordova_media_media.md.html#Media

ตัวอย่างเช่น

$("#img01").on("tap", function() {
 var myMedia = new Media("/android_asset/www/sound/1.mp3", onSuccess, onError);        
 myMedia.play();
});

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

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

ซึ่ง มีข้อควรระวังดังนี้

1. อย่าลืมอ้างถึง cordova.js เช่น "script src="js/libs/Cordova-2.9.0/cordova-2.9.0.js"
2. ถ้าไฟล์เสียงอยู่บนอินเตอร์เน็ต สามารถใช้ var my_media = new Media("http://abcdef/1.mp3", onSuccess, onError); ได้เลย
3. ถ้าไฟล์เสียงอยู่ในตัว mobile app เอง อย่าลืมอ้างถึงโฟลเดอร์เสียงนั้นแบบเต็มๆ เช่น var my_media = new Media("/android_asset/www/sound/1.mp3", onSuccess, onError);  ซึ่งในกรณีนี้ไฟล์เสียงจะอยู่ใต้โฟลเดอร์ sound และโฟลเดอร์ sound อยู่ใน level เดียวกับไฟล์ index.html ครับ

แต่ถ้าต้องการให้เล่นเสียงแบบต่อเนื่อง คือเมื่อจบแล้วเล่นใหม่เป็นลูปไปเรื่อยๆ

สำหรับ iOS มีคำสั่งให้เลยครับ คือ

myMedia.play({ numberOfLoops: 999 });

แต่ platform อื่น ต้องเขียนโค้ดเองครับ ประมาณนี้

var myMedia = null;
function onDeviceReady(){
 myMedia = new Media("file:///android_asset/www/audio.mp3", onSuccess, onError, onStatus);
 myMedia.play();
}

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

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

// onStatus Callback 
function onStatus(status) {
 //if audio stops, plat it again
 if(status==Media.MEDIA_STOPPED) {
  myMedia.play();
 }
}

ข้อมูลอ้างอิง

http://docs.phonegap.com/en/2.9.0/cordova_media_media.md.html#Media

http://stackoverflow.com/questions/4438822/playing-local-sound-in-phonegap?lq=1
http://ilee.co.uk/looping-audio-with-phonegap/
http://stackoverflow.com/questions/13927316/how-to-loop-a-audio-in-phonegap