1

I have a HttpHandler in C# that returns an MP3 file in an array of bytes, the code is like this:

    public class BasicHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext httpContext)
    {
        string mp3FileName = @"C:\Users\gustavo.torrico\Desktop\WInAir\TestPlayer\Mp3Player\Files\TestFile.mp3";
        byte[] bytes = File.ReadAllBytes(mp3FileName);
        httpContext.Response.ContentType = "audio/mp3";
        httpContext.Response.BinaryWrite(bytes);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

The file must be reproduced in a HTML5 player, the code of player looks like this:

<audio controls>
    <source loop="on" preload="on" src="http://localhost:4677/Services/BasicHandler.ashx" type="audio/mpeg">
        Your browser does not support the audio element.</audio>

The player, works perfect with IE +9 and Firefox 21, but with Chrome, there are a problem, just reproduces the file one time and no more. Is there any way to solve this problem without a plug-in like Silverlight or Flash?

The project of example is here

4

2 回答 2

0

have you tried setting the src attribute via javascript and not hard-coding it into the html? I've had several bad experiences with chrome when I hardcode src and have had to resort to setting it via javascript. Not sure how it would work with your project, but it's probably worth a try.

于 2013-05-27T22:13:35.317 回答
0

Researching a little bit about the behavior of HTML5 player in different browsers, I found that Google Chrome requests to the server the resource every time that the audio is played, here a more complete explanation

For solve the problem, is necessary force to cache the audio file in the HttpHandler:

    public void ProcessRequest(HttpContext httpContext)
    {
        string mp3FileName = @"C:\Users\gustavo.torrico\Desktop\WInAir\TestPlayer\Mp3Player\Files\TestFile.mp3";

        byte[] bytes = File.ReadAllBytes(mp3FileName);
        httpContext.Response.ContentType = "audio/mp3";
        httpContext.Response.AddHeader("pragma", "Public");
        httpContext.Response.Cache.SetCacheability(HttpCacheability.Public);
        httpContext.Response.Cache.SetLastModified(new DateTime(2000, 01, 01));
        httpContext.Response.Cache.SetExpires(new DateTime(2020, 01, 01));
        httpContext.Response.BinaryWrite(bytes);
    }

With this modification, Chrome can save a copy of the file in cache, but there are a bug, because the file still cannot to reproduce several time, unless you refresh the page with F5, with the refresh the player will work perfect.

A possible work around for this trouble is wrap the audio player in a div, and then refresh the content of the div, here a simple snippet:

Partial View Player:

<div id="Player">
<audio id="audioPlayer" preload="auto" controls onplay="ReloadPlayer()">
    <source src="http://localhost:4677/Services/BasicHandler.ashx" type="audio/mpeg">
        Your browser does not support the audio element.
</audio>

Script:

    function ReloadPlayer() {
    $("#Player").load("Home/Player", function () {
        $('#audioPlayer').removeAttr("onplay");
        $('#audioPlayer').prop("autoplay", true);
        //alert('Load was performed.');
    });
}

Main View:

<div id="Player">
    @Html.Partial("Player")
</div>
于 2013-05-28T23:11:58.337 回答