web-dev-qa-db-fra.com

Jouer du son sur l'application Phonegap pour Android

J'essaie de lire un fichier mp3. Cela fonctionne si je change le chemin d'accès au fichier sur mon serveur Web local, mais si j'exécute ce programme sur un périphérique Android, le son n'est pas lu et aucune erreur ne s'affiche.

Je suis assez sûr que le fichier mp3 est introuvable, mais je ne sais toujours pas comment le réparer.

C'est le Html 

  <body>

        <audio id="successSound" src="/Android_asset/www/sound/successSound.mp3" type="audio/mpeg" ></audio>
           <audio id="errorSound" src="/Android_asset/www/sound/errorSound.mp3" type="audio/mpeg" ></audio>
<!-- some more UI -->
  </body>

C'est le Javascript  

document.getElementById('errorSound').play();

La est la structure de fichier 

phonyapp
`-- www
    `-- index.html
        |-- sound
        |   |-- errorSound.mp3
        |   `-- successSound.mp3
        |-- res
        `-- spec

Modifier 1

J'ai essayé 

<audio id="successSound" src="sound/successSound.mp3" type="audio/mpeg" ></audio>

Cela fonctionnait en chrome sur mon serveur Web local mais pas sur Android.

J'ai essayé

<audio id="successSound" src="http://html5multimedia.com/media/sayHello.mp3" type="audio/mpeg" ></audio>

Cela a fonctionné, mais je dois lire les fichiers locaux

androidcordova
19
Mathias F

La méthode de lecture fournie par l'API HTML5 est utile pour la lecture de fichiers multimédias disponibles sur le Web. Phonegap fournit le plug-in multimédia permettant de lire des fichiers multimédia locaux. J'ai vérifié votre code et joué le son avec succès en apportant les modifications suivantes. S'il vous plaît vérifier à votre fin.

1.Ajouter la ligne suivante à config.xml

<gap:plugin name="org.Apache.cordova.media" />

2. Remplacez les lignes dans index.html

<button onclick="document.getElementById('successSound').play()">Play successSound local</button>
<button onclick="document.getElementById('errorSound').play()">Play errorSound local</button>

avec ces lignes

<button onclick="playAudio('successSound')">Play successSound local</button>
<button onclick="playAudio('errorSound')">Play errorSoundlocal</button>

3.Ajouter la fonction suivante à js/index.js

function playAudio(id) {
    var audioElement = document.getElementById(id);
    var url = audioElement.getAttribute('src');
    var my_media = new Media(url,
            // success callback
             function () { console.log("playAudio():Audio Success"); },
            // error callback
             function (err) { console.log("playAudio():Audio Error: " + err); }
    );
           // Play audio
    my_media.play();
}
41
Surajit Sarkar

Utilisez ce code

  <body>

    <audio id="successSound" src="file:///Android_asset/www/sound/successSound.mp3"      type="audio/mpeg" ></audio>
       <audio id="errorSound" src="file///Android_asset/www/sound/errorSound.mp3"   type="audio/mpeg" ></audio>
<!-- some more UI -->
 </body>
4
Praveena

Avez-vous essayé de supprimer la partie /Android_asset/www/ de votre code? Votre application agit comme un site Web et pense que sa racine est le dossier www lui-même.

Edit: Je vais éditer le commentaire. Code ne montrant pas en quelque sorte.

0
user1990252
`` // 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);
            }
        }
        // onSuccess Callback
        //
        function onSuccess() {
            console.log("playAudio():Audio Success");
        }
function stopAudio() {
            if (my_media) {
                my_media.stop();
            }
            clearInterval(mediaTimer);
            mediaTimer = null;
        }
        // onError Callback
        //
        function onError(error) {
        }
        // Set audio position
        //
        function setAudioPosition(position) {
            document.getElementById('audio_position').innerHTML = position;
        }
0
Bugasiso

Si vous utilisez des fichiers locaux, essayez de les référencer avec src="file:///yourpath/sayHello.mp3"

0
sschrass

J'ai eu le même problème et finalement je l'ai fait fonctionner, avec moi le problème était lié à la portée de ma variable média. Je l'ai eu comme suit:

(function () {

    "use strict";
     var media;
     document.addEventListener('deviceready', onDeviceReady.bind(this), false);

function onDeviceReady() {
    media = new Media("/Android_asset/www/sounds/wat is je wens.mp3", null, function (e) {
    alert('Media Error');
    alert(JSON.stringify(e));
    });

    alert('deviceready')
};
function onStart() {
    media.play();
    alert('yay')

}
};

Essentiellement, je me suis assuré que la portée de ma variable média était en quelque sorte globale en la déclarant en dehors de onDeviceReady, mais que Media n'était pas appelé avant l'événement deviceready.

0
panpan