Question

我试图播放我从Mongo GridFSBucket流出的mp3。我的问题的根源是我用我的把手模板将我的音频标签的src属性设置为我的流应该前往的URL，但播放器没有响应。

如果我没有将此网址提供给我的音频代码并删除了手柄代码，我的浏览器（Chrome）会创建一个视频标记，该视频标记会使窗口变黑，并在中心叠加HTML媒体播放器控件并播放轨道没有问题。

我应该如何向播放器指定它正在创建的视频标签流是否应该转到音频播放器？

list.handlebars

<script src="../index.js" ></script>


<title>CRATE</title>
</head>
<body>


<div>tracks displayed below</div>

<div>{{userNameId}}'s Tracks</div>

{{#each tracks}}
   <div class="row">
     <div class="col-md-12">
       <form id="trackSelection" method="GET" action="/play">
        <input type="hidden" name="bytes" value="{{length}}">
         <button class="playButton" type="submit" name="id" value=" . 
         {{_id}}">{{filename}}</button>
        </form>
     </div>
    </div>
  {{/each}}


  <audio  id="playback" src="{{sourceUrl}}" type="audio/mpeg" controls> 
  </audio>

  </body>
  </html>

index.js

app.get('/play', urlEditor, function(req, res, next) {

var db = req.db // => Db object
var size = sanitizer.escape(req.query.bytes);
var sanitizedTrackId = sanitizer.escape(req.query.id);
var username = 'ross';

var protocol = req.protocol;
var originalUrl = req.originalUrl;

// var sourceUrl = protocol + '://' + hosted + originalUrl;
var sourceUrl = protocol + '://' + req.get('host') + originalUrl;

console.log("sourceUrl", sourceUrl)
console.log("type", typeof sourceUrl)

if (username) {
    const collection = db.collection(username + ".files");
    var userNameId = collection.s.name;
    console.log(userNameId);

    const tracks = new Promise(function(resolve, reject) {
        resolve(collection.find({}).toArray(function(err, tracks) {
            assert.equal(err, null);

            // return tracks;
            finishPage(tracks);
        }))
    })


} else {

    console.log('waiting')

}

function finishPage(tracks) {


    try {

        console.log("SID", sanitizedTrackId);
        var trackID = new ObjectID(sanitizedTrackId);

    } catch (err) {
        return res.status(400).json({ message: "Invalid trackID in URL parameter. Must be a single String of 12 bytes or a string of 24 hex characters" });
    }
    let playEngine = new mongo.GridFSBucket(db, {

        bucketName: username

    });

    var downloadStream = playEngine.openDownloadStream(trackID);
    downloadStream.pipe(res);

    console.log('success');
    console.log("___________________");

    var head = {
        'Accept-Ranges': 'bytes',
        'Content-Length': size,
        'Content-Type': 'audio/mp3',
    }

    // res.render("list");
    // res.set({ 'content-type': 'audio/mp3', 'accept-ranges': 'bytes', 'content-length': size }).render("list", { tracks: tracks, userNameId: userNameId, sourceUrl: sourceUrl });

    res.status(206, head).render("list", { tracks: tracks, userNameId: userNameId, sourceUrl: sourceUrl });

}

不使用Handlebars的HTML5音频模板src属性

0 个答案: