IBM Worklight 6.1 - Unable to play a local media f

2019-09-16 17:24发布

站内问答 / JavaScript
363 1 6

Tested in Android Emulator.

I am trying to use Cordova Media API to manage the playing of audio stored locally within the Worklight project. Initially I attempted to update my project to accomplish this task, but was not successful, so I decide to use the complete example documented on the Apache Cordova Media API page. I used the full sample to play, pause, and stop an audio file. The only change I made was to play the audio file stored locally in my worklight project.

However, the above fails...

I created a new folder, "WavAudo", in the sample project that contains .mp3, and .wav versions of the audio to play.

When I start the application I receive an alert popup that the error.code, and error.message are undefined. Using Chrome debugger I see the that on deviceready I get Uncaught ReferenceError Media is not defined.

I beleive I've tried all possible path+file combinations to locate the file, but I must have missed something.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Media Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        playAudio("/android_asset/www/WavAudio/16300.mp3");
    }

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

    // Play audio
    //
    function playAudio(src) {
        // Create Media object from src
        my_media = new Media(src, onSuccess, onError);

        // 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() {
        if (my_media) {
            my_media.pause();
        }
    }

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

    // onSuccess Callback
    //
    function onSuccess() {
        console.log("playAudio():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;
    }

    </script>
  </head>
  <body>
    <a href="#" class="btn large" onclick="playAudio
    ('/android_asset/www/WavAudio/16300.mp3');">Play Audio</a>
    <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a>
    <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a>
    <p id="audio_position"></p>
  </body>

I also added these to Android Manifest:

 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

1条回答
Juvenile、少年°
2楼-- · 2019-09-16 17:50

The sample code provided at Cordova's website works, however it looks like the URL they point to is broken. I've replaced it with another and then it worked.

As for playing a local media file, you need to provide the full path to the media file's location where it'll be in the generated Android project. For example, if you create a common\audio folder in the Worklight application and place a .mp3 file in it, you need to use the following path (in the HTML or JavaScript, or however you'd like...):

<a href="#" onclick="playAudio('/android_asset/www/default/audio/myMediaFile.mp3');">Play Audio</a>

This is because in Worklight, every application is considered a "skin". There is the "default" skin, and if you add another, it will have its own folder in the www folder.

Sample project: Android Cordova Media API

P.S., I do not find it a good practice to copy-paste an example as-is from Cordova to a Worklight project.

  • There is no cordova.js to link to.
  • It is redundant to listen to deviceready as this is handled internally. Putting it this way: if you've reached wlCommonInit(), you're good to go.
  • There is no need to add extra permissions, unless you want what those permissions offer...
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)