5

I am trying to stream a file using the audio HTML5 tag. I have put the Controller action to return a FileStream and attached it to the src for the audio. However, the content is not loading into the audio tag and doesn't play when I press the default play button. I know the controller is working when I access the src directly. However, it doesn't work in the HTML5 audio tag.

Can anyone tell me what I am missing?

Clay Wright
  • 75
  • 1
  • 5

1 Answers1

8

You should not return a FileStream, you should return a FileStreamResult or a FilePathResult from your controller action, like this:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MyAudio()
    {
        var file = Server.MapPath("~/app_data/test.mp3");
        return File(file, "audio/mp3");
    }
}

and the ~/Views/Home/Index.cshtml view:

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sound Sample</title>
</head>
<body>
    <article class="audio">
        <header>
            <h2>Some audio</h2>
        </header>

        <audio controls>
            <source src="@Url.Action("myaudio")" type="audio/mp3" />
            <p>Your browser does not support HTML 5 audio element</p>
        </audio>
    </article>
</body>
</html>
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 1
    Wouldn't returning file just cause the browser to download the file in full and then begin playing it? Rather then streaming it? – Dan Harris Apr 18 '17 at 12:14