html5 load audio time/metadata but not audio?

1
votes

I am very stuck. I messed with this for at least 30mins and I can't figure out how to preload metadata only.

if you go here you'll see there is a preload attribute that allows you to specify what to preload. I marked it down as metadata only because I wanted the time length of every audiofile. Since it wasn't loading I tried .load() and that loads the actual audio even though I specified metadata.

How do I load the meta in html5 javascript? if it loaded a second or two of audio I wont mind as long as it isn't trying to preload minutes or the whole file.

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-media-networkstate

Value 2 = NETWORK_LOADING, where 1 = idle aka loaded.

http://jsfiddle.net/CD3BZ/

<body>
<div>Click to test if loaded</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
try{
    var a1 = new Audio('http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg');
    $(a1).bind('loadedmetadata', function(e){
        //alert('a1 ' + a1.duration + ' ' + a1.networkState);
    });

    $(a1).bind('canplay', function(e){
        alert('a1z ' + ' ' + a1.networkState);
    });

    $(a1).attr('preload', 'metadata');
    a1.preload = 'metadata';
    //alert(a1.duration);
    //a1.play();
    a1.load();
    $('div').click(function(e){
        alert('a1z ' + ' ' + a1.networkState);
    });
}
catch(e){
    alert(e);
}
</script>

</body>
2
javascripthtmlaudio

2 Answers

2
votes

You should be able to use the preload attribute: 

<audio autobuffer preload=”metadata” src=”audio.foo”></audio>

There's also a suggestion and some discussion on Chris Pearce's blog, which basically suggests pausing and then setting src to an empty string. As explained in comments on the post, this method is not ideal... You could (in theory) do this as soon as the loadedmetadata event has fired, and you've retrieved the metadata you need.

This question suggest setting headers, which also might work...

0
votes

You shouldn't call the load method.

I created a function that returns a promise which will be resolved when the metadata is loaded. With this function only the metadata of the audio file will be loaded:

function getAudioMetaData(src) {
    return new Promise(function(resolve) {
        var audio = new Audio();

        $(audio).on("loadedmetadata", function() {
            resolve(audio);
        });

        audio.preload = 'metadata';
        audio.src = src;
    });
}