【问题标题】:Live streaming audio in a HTML5 canvas/page?在 HTML5 画布/页面中实时流式传输音频?
【发布时间】:2012-06-06 13:15:31
【问题描述】:

我创建了一个实时视频流,它使用转换为 base64 字符串的 jpeg 图像,这些字符串通过 websockets 发送到 HTML5 画布。它工作得很好。我还捕获了鼠标光标/按钮和任何按键来模拟远程桌面。图像被捕获并发送到 C# 中的套接字。

我现在想以某种方式将实时音频流式传输到页面/画布,以便它具有远程桌面应用程序的所有功能。有谁知道我会怎么做以及使用哪种文件格式?是否可以将音频转换为 base64 字符串并以这种方式发送?感谢您的帮助。

【问题讨论】:

  • canvas 是即时模式绘图表面。它根本没有音频功能。您可能正在寻找 audio 元素。

标签: c# javascript audio canvas live-streaming


【解决方案1】:

您可以使用audio html5 元素播放音频流。

要支持大多数常用浏览器,您必须以至少 2 种格式进行流式传输,例如 MP3 和 OGG。

对于流式音频 (OGG/MP3),您可以使用 Icecast server

这是audio标签用法的示例:

<!DOCTYPE html>
<html>
    <head>
        <title>Audio tag test!</title>
    </head>
    <body>
        <audio autoplay="true">
            <source src="http://radio.hbr1.com:19800/ambient.ogg" type="audio/ogg" />
            <source src="http://stream1.gameowls.com:8000/bitwave.mp3" type="audio/mpeg" />
            Your browser does not support the audio element.
        </audio>
    </body>
</html>

音频标签播放浏览器可以处理的第一个源。

【讨论】:

    【解决方案2】:

    尝试使用Web Audio API

    Html5Rocks上的描述和示例

    受 Chrome 和 Safari 支持。

    【讨论】:

    • 目前并非所有浏览器都支持网络音频。
    • Chrome & Safari 支持@BjornRoche
    猜你喜欢
    • 2012-04-03
    • 2012-11-20
    • 2016-05-12
    • 1970-01-01
    • 1970-01-01
    • 2013-04-30
    • 2019-09-03
    • 1970-01-01
    • 2023-03-12
    相关资源
    最近更新 更多