＜audio /＞标签实现音频流或语音流播放

丁先生320

已于 2024-06-18 17:54:10 修改

阅读量349

点赞数 5

文章标签：音视频前端 javascript vue react html5

于 2024-06-18 17:27:29 首次发布

本文链接：https://blog.csdn.net/weixin_56383764/article/details/139777356

版权

情景：

后端返回了一段音频流，即："//PkxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.....",做了很多尝试，如转成MP3、接口用GET、转blob等都不行

知识点：

使用Fetch的音频流

是指通过Fetch API来获取音频数据流。Fetch API是一种现代的网络请求API，用于在浏览器中进行网络请求。它提供了一种简单、灵活的方式来获取各种类型的数据，包括音频流。

音频流是指连续的音频数据，可以通过网络进行传输。使用Fetch API可以通过HTTP请求获取音频流，并在前端进行处理和播放。

优势：

简单易用：Fetch API提供了一套简洁的方法来发送网络请求，包括获取音频流。它使用Promise对象来处理异步操作，使代码更加清晰易读。
跨平台兼容性：Fetch API是基于标准的Web API，可以在各种现代浏览器和平台上使用，包括桌面和移动设备。
灵活性：Fetch API提供了丰富的配置选项，可以自定义请求头、请求方法、请求参数等，以满足不同的需求。

应用场景：

音频流播放：通过Fetch API获取音频流，可以在前端进行实时播放，例如音乐、在线广播等。
音频处理：获取音频流后，可以使用Web Audio API等技术对音频进行处理，如音频剪辑、混音、特效等。
实时通信：音频流可以用于实时通信应用，如语音聊天、视频会议等。

HTML:

<audio ref="audioPlayer" controls style="width: 100%;"></audio>

JS:

 loadAndPlayAudio() {
      // 假设你从 API 获取了 Base64 编码的音频数据
      const base64AudioData = 'data:audio/mp3;base64,//PkxAAAAANIAAAAAExBTUUz...'; // 替换为你的 Base64 数据

      // 将 Base64 字符串转换为 Blob 对象
      fetch(base64AudioData)
      .then(response => response.blob())
      .then(blob => {
        const audioUrl = URL.createObjectURL(blob);
        this.$refs.audioPlayer.src = audioUrl;
        this.$refs.audioPlayer.play();
      })
      .catch(error => console.error('播放音频出错:', error));
    }

注意点：

如果<audio></audio>标签是循环渲染的，赋值时需要序号才能精准定位。

 this.$refs.audioPlayer[index].src = audioUrl;
 this.$refs.audioPlayer[index].play();

audio标签

<1>常用标签属性

autoplay：是否音频在就绪后马上播放。

controls：是否向用户显示控件，比如播放按钮。

loop：是否音频结束时重新开始播放。

preload：是否音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。

src：要播放的音频的 URL。

HTML5 audio支持的音频格式有wav，mp3和ogg格式。

ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。

mp3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

wav：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

<2>常用的控制函数

load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载

play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放

pause()：暂停处于播放状态的音频、视频文件

loadedmetadata()：当加载语音流元数据完成后，会触发该事件的回调函数，语音元数据主要是语音的长度之类的数据

<3>获取当前播放时间

在dom挂载完毕后访问currentTime属性获得，通过timeupdate钩子可实时监控

<4>获取媒体总时长

在canplay（浏览器可以开始播放该音视频）钩子函数回调中访问duration属性可获得（注：在dom挂载完直接获取duration会返回NaN）

<5>方法

addTextTrack() 为音视频加入一个新的文本轨迹

canPlayType() 检查指定的音视频格式是否得到支持

load() 重新加载音视频标签

play() 播放音视频

pause() 暂停播放当前的音视频

<6>属性

audioTracks 返回可用的音轨列表（MultipleTrackList对象）

autoplay 媒体加载后自动播放

buffered 返回缓冲部件的时间范围(TimeRanges对象)

controller 返回当前的媒体控制器（MediaController对象）

controls 显示播控控件

crossOrigin CORS设置

currentSrc 返回当前媒体的URL

currentTime 当前播放的时间，单位秒

defaultMuted 缺省是否静音

defaultPlaybackRate 播控的缺省倍速

duration 返回媒体的播放总时长，单位秒

ended 返回当前播放是否结束标志

error 返回当前播放的错误状态

initialTime 返回初始播放的位置

loop 是否循环播放

mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)

muted 是否静音

networkState 返回当前网络状态

paused 是否暂停

playbackRate 播放的倍速

played 当前播放部件已经播放的时间范围(TimeRanges对象)

preload 页面加载时是否同时加载音视频

readyState 返回当前的准备状态 {

0: HAVE_NOTHING 没有准备就绪的状态

1: HAVE_METADATA 关于音频就绪的元数据

2: HAVE_CURRENT_DATA 当前可用，但下一帧不确定

3: HAVE_FUTURE_DATA 当前和下一帧可用
4: HAVE_ENOUGH_DATA 有足够的数据支持播放

}

seekable 返回当前可跳转部件的时间范围(TimeRanges对象)

seeking 返回用户是否做了跳转操作

src 当前音视频源的URL

startOffsetTime 返回当前的时间偏移(Date对象)

textTracks 返回可用的文本轨迹(TextTrackList对象)

videoTracks 返回可用的视频轨迹(VideoTrackList对象)

volume 音量值

<7>钩子

abort 当音视频加载被异常终止时产生该事件

canplay 当浏览器可以开始播放该音视频时产生该事件

canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件

durationchange 当媒体的总时长改变时产生该事件

emptied 当前播放列表为空时产生该事件

ended 当前播放列表结束时产生该事件

error 当加载媒体发生错误时产生该事件

loadeddata 当加载媒体数据时产生该事件

loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件

loadstart 当开始查找媒体数据时产生该事件

pause 当媒体暂停时产生该事件

play 当媒体播放时产生该事件

playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件

progress 当获取到媒体数据时产生该事件

ratechange 当播放倍数改变时产生该事件

seeked 当用户完成跳转时产生该事件

seeking 当用户正执行跳转时操作的时候产生该事件

stalled 当试图获取媒体数据，但数据还不可用时产生该事件

suspend 当获取不到数据时产生该事件

timeupdate 当前播放位置发生改变时产生该事件

volumechange 当前音量发生改变时产生该事件

waiting 当视频因缓冲下一帧而停止时产生该事件