HTML5 аудио не воспроизводится с шаблонным атрибутом src на руле - PullRequest
Новая
       7

HTML5 аудио не воспроизводится с шаблонным атрибутом src на руле

0 голосов
/ 31 мая 2018

Я пытаюсь воспроизвести mp3, которые я передаю из Mongo GridFSBucket.Корень моей проблемы в том, что я установил атрибут src моего аудио-тега с моим шаблоном handlebars на URL, по которому должен идти мой поток, но проигрыватель не отвечает.

Если я не передаю этот 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 });

}
...