Question

我在C＃中有一个HttpHandler，它返回一个字节数组的MP3文件，代码是这样的：

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

该文件必须在HTML5播放器中复制，播放器代码如下：

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

该播放器适用于IE +9和Firefox 21，但使用Chrome时，有一个问题，只需重复一次该文件即可。没有像Silverlight或Flash这样的插件有没有办法解决这个问题？

示例项目为here

Answer 1

您是否尝试过通过javascript设置src属性而不是将其硬编码到html中？当我硬编码src并且不得不求助于通过javascript设置时，我有几次使用chrome的糟糕经历。不确定它如何适用于您的项目，但它可能值得一试。

Answer 2

稍微研究一下HTML5播放器在不同浏览器中的行为，我发现每次播放音频时，Google Chrome都会向服务器请求资源here a more complete explanation

为了解决问题，必须强制在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);
    }

通过这次修改，Chrome可以在缓存中保存文件的副本，但是有一个bug，因为文件仍然无法重现几次，除非你用F5刷新页面，随着刷新，播放器将完美运行。

解决这个问题的可能方法是将音频播放器包装在div中，然后刷新div的内容，这里只是一个简单的片段：

部分查看播放器：

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

脚本：

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

主要观点：

<div id="Player">
    @Html.Partial("Player")
</div>

使用Chrome从HttpHandler重现MP3文件时出错

2 个答案: