V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
artleer0
V2EX  ›  程序员

请问下大家 前端怎么把调用 sdk 返回的媒体流转为声音播放出来。。

  •  
  •   artleer0 · 2020-09-19 16:31:02 +08:00 · 1489 次点击
    这是一个创建于 1312 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我对这方面完全的一无所知,最近一个需求是这个方面的,不知道如何下手,大家推荐我一些学习的网站也是非常感谢。

    11 条回复    2020-09-20 14:00:25 +08:00
    vision1900
        1
    vision1900  
       2020-09-19 16:38:49 +08:00
    呃。。。html5 audio 标签?
    vision1900
        2
    vision1900  
       2020-09-19 16:54:47 +08:00
    src 设为 URL.createObjectURL(媒体返回数据)
    wunonglin
        3
    wunonglin  
       2020-09-19 17:00:51 +08:00
    artleer0
        4
    artleer0  
    OP
       2020-09-19 17:51:44 +08:00
    @vision1900 请问下 这个媒体流的数据是什么类型的。。。
    vision1900
        5
    vision1900  
       2020-09-19 18:36:09 +08:00   ❤️ 1
    blob, 可以参考下这个 StackOverflow: https://stackoverflow.com/questions/36738026/play-a-binary-string-with-the-html-audio-tag
    关键点是 xhr 的 responseType 要设为 blob
    其实你想一下,文件无非是一堆 0 和 1,后端返给你一般也都是 raw data,也就是一堆 0 和 1 。把 responseType 设为 blob 其实就是告诉 JS 这是一堆原生数据,现在我想要以编程的方式处理它,也就是我想要它成为对象,在 JS 中这个对象由浏览器提供给我们叫做 blob 。至于如何由 二进制 变成 blob 你不用担心,浏览器都帮你处理好了。之后,只需要调用浏览器提供的 URL.createObjectURL, 参数是刚刚获取的 blob 对象,就能生成一个类似 URL 一样的字符串,把这个字符串丢给 audio 标签,它就能自己去播放。
    最简单的例子是: <audio src="http://example.com/test.mp3" />
    这个代码再简单不过了,其实 audio 标签背后帮我们做了很多东西,包括发出一个 http 请求从服务器获取数据,转化为可以使用的 blob 对象,然后开始播放
    由于 audio 的 src 属性只能是 字符串,所以当我们自己要完成这些步骤时,需要额外多一步:调用 URL.createObjectURL 方法,生成一个莫须有的 URL, 并把这个 URL 和 其中的媒体资源(blob)对应起来
    artleer0
        6
    artleer0  
    OP
       2020-09-19 19:09:11 +08:00
    @vision1900 非常感谢你!!!!!
    artleer0
        7
    artleer0  
    OP
       2020-09-20 00:12:51 +08:00
    @vision1900 你好~再问下 这种方式可以实现实时通话吗??
    Ariver
        8
    Ariver  
       2020-09-20 02:21:36 +08:00 via iPhone
    @artleer0 webrtc
    artleer0
        9
    artleer0  
    OP
       2020-09-20 09:58:50 +08:00
    @Ariver 你有使用过这个吗
    vision1900
        10
    vision1900  
       2020-09-20 10:53:17 +08:00
    @artleer0 应该是 WebRTC,RTC 就是 Real Time Communication,不过我没有任何经验. 之前听说过一个叫 PeerJS 的库,你可以参考下: https://github.com/peers/peerjs#media-calls
    artleer0
        11
    artleer0  
    OP
       2020-09-20 14:00:25 +08:00
    @vision1900 好的万分感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1575 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:00 · PVG 01:00 · LAX 10:00 · JFK 13:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.