CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-storage
agr
agr

Reputation: 127

Firebase storage download file functionality not working(Javascript / Web application)

I want to play the audio residing in the firebase storage. The following is the HTML Code for it:-

<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-database.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-firestore.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-functions.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-storage.js"></script>
        <script src="sample.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script>
  // Initialize Firebase
  initialise();
  var config = {
    apiKey: "<>",
    authDomain: "<>",
    databaseURL: "<>",
    projectId: "<>",
    storageBucket: "<>",
    messagingSenderId: "<>"
  };
  firebase.initializeApp(config);
</script>

    </head>

    <body>
        <div>
            <audio id="currentsongplayer" controls autoplay>
                <!--<source src="horse.ogg" type="audio/ogg">-->
                <source id="currentaudiosource" src="05 - Track 05.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </div>
    </body>
</html>

This is the Javascript file:-

function initialise()
{
    alert("started");
    alert(firebase.storage());
    // Get a reference to the storage service, which is used to create references in your storage bucket
    var storage = firebase.storage();
    alert("check-1");
     // Create a storage reference from our storage service
    var storageRef = storage.ref();
    alert("check0");

    //var  pathReference= storage.refFromURL('my url obtained from file properties in firebase storage');
    var pathReference = storageRef.child('/01.HAGE SUMMANE.mp3');
    alert("check1");

    // Get the download URL
    pathReference.getDownloadURL().then(function(url) {
        alert("check2");
            var audio=document.getElementById("currentsongplayer");
            var source=document.getElementById("currentaudiosource");

            alert("downloaded");
            source.src=url;
            audio.load();
            audio.play();

        }).catch(function(error) {
            alert("caught");
          // A full list of error codes is available at
        // https://firebase.google.com/docs/storage/web/handle-errors
        switch (error.code) {
            case 'storage/object-not-found':
                alert(error.message);
            // File doesn't exist
            break;

            case 'storage/unauthorized':
                alert(error.message);
            // User doesn't have permission to access the object
            break;

            case 'storage/canceled':
                alert(error.message);
            // User canceled the upload
            break;

            case 'storage/unknown':
                alert(error.message);
            // Unknown error occurred, inspect the server response
            break;
        }
    });      
}

enter image description here

In the above javascript,only the first alert(which alerts as started) is executed.None of the alerts after this is working.I have referred the documentation by firebase storage many times.I am not understanding the issue here.

I have also uploaded the screenshot of the database so that you can correct me if I made mistake in the filename or pathname.

The entire code for this testing web application has been provided above as html and javascript files.Please look into it.

Thanks a lot for the help.

Upvotes: 1

Views: 815

Answers (1)

user10279127
user10279127

Reputation:

You have to move all the tags <script> in the body, at the end before </body> closes.

There is where you should always put em, also if you call each firebase functionality <script> separately (that btw is the right thing to do to improve loading times), you shouldn't load the entire bundle firebase.js (also be careful because you call it twice).

The structure should be like:

  1. various single functionality firebase <script>

  2. the initialise() below them

  3. and last all other <script> like jquery, bootstrap etc.

Upvotes: 1

Related Questions