Firebase 存储下载文件功能不起作用（Javascript / Web 应用程序）答案

【问题标题】：Firebase storage download file functionality not working(Javascript / Web application)Firebase 存储下载文件功能不起作用（Javascript / Web 应用程序）
【发布时间】：2018-10-26 12:56:24
【问题描述】：

我想播放 Firebase 存储中的音频。以下是它的 HTML 代码：-

<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>

这是 Javascript 文件：-

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

在上面的 javascript 中，只执行了第一个警报（启动时发出警报）。之后的警报都不起作用。我已经多次通过 firebase 存储参考文档。我不明白这里的问题。

我还上传了数据库的截图，如果我在文件名或路径名上有错误，你可以纠正我。

此测试网络应用程序的完整代码已在上面提供为 html 和 javascript 文件。请查看。

非常感谢您的帮助。

【问题讨论】：

您是否尝试过在

标签： javascript html firebase firebase-storage

【解决方案1】：

你必须在</body>关闭之前移动body中的所有标签<script>。

你应该总是把 em 放在哪里，如果你分别调用每个 firebase 功能 <script>（顺便说一句，这样做是为了缩短加载时间是正确的做法），你不应该加载整个包 firebase .js（也要小心，因为你调用了两次）。

结构应该是这样的：

各种单一功能的firebase <script>
他们下面的initialise()
最后是所有其他<script>，如 jquery、bootstrap 等。

【讨论】：