如何使用JavaScript在MVC项目中播放mp3文件?

时间:2019-05-11 18:46:39

标签: javascript asp.net-mvc audio

我会看类似的话题。但是我不明白。 mvc解决方案中有多个项目。我想在“凭证”项目中的cshtml中使用javascript播放音频文件。此文件位于“主”项目下的“内容”文件夹中。我可以在控制器级别上与项目相关。但是我在视图级别上遇到了问题。

<script>
var audio = new Audio();
audio.src = ""; // I could not add the path of the file.
audio.play();
</script>

我已经尝试过这种方式:

audio.src = "@Server.MapPath("~/Content/sounds/beep.wav")";

我也尝试使用html5。但是同样,我无法访问“ src”中的另一个项目。我尝试将音频文件转换为控制器部分的字节。但是我没有得到有用的结果。

2 个答案:

答案 0 :(得分:2)

您可以这样服务:

    [HttpGet]
        public ActionResult GetAudioFile(string filename)
        {
string filePath = Server.MapPath(Url.Content($"~/Content/sounds/{filename}"));
            var bytes = new byte[0];


            using (var fs = new FileStream(filePath , FileMode.Open, FileAccess.Read)
            {
                var br = new BinaryReader(fs);
                long numBytes = new FileInfo(fileLocation).Length;
                buff = br.ReadBytes((int)numBytes);
            }

            return File(buff, "audio/mpeg", "file.mp3");
        }

然后在您的Java脚本代码中:

function Sound(source, volume, loop)
{
    this.source = source;
    this.volume = volume;
    this.loop = loop;
    var son;
    this.son = son;
    this.finish = false;
    this.stop = function()
    {
        document.body.removeChild(this.son);
    }
    this.start = function()
    {
        if (this.finish) return false;
        this.son = document.createElement("embed");
        this.son.setAttribute("src", this.source);
        this.son.setAttribute("hidden", "true");
        this.son.setAttribute("volume", this.volume);
        this.son.setAttribute("autostart", "true");
        this.son.setAttribute("loop", this.loop);
        document.body.appendChild(this.son);
    }
    this.remove=function()
    {
        document.body.removeChild(this.son);
        this.finish = true;
    }
    this.init = function(volume, loop)
    {
        this.finish = false;
        this.volume = volume;
        this.loop = loop;
    }
}

也这样使用:

var url= 'ControllerName/GetAudioFile?filename=yourfilename '
var foo = new Sound("url", 100, true);
foo.start();
foo.stop();
foo.start();
foo.init(100, false);

答案 1 :(得分:0)

我尝试了以下代码:

<script>
    $(document).ready(function () {
var url = "@Url.Content("~/Content/sounds/notificationSound.mp3")";
    new Audio(url).play();
}</script>

刷新页面时,代码有效。然后按Ctrl + F5。但是这次没有用。错误消息显示在屏幕上。错误消息:

  

未捕获(承诺)的DOMException