Audio音频资源播放

1、<audio>标签播放音频和使用AudioContext播放音频的区别?

以下是详细的比较:

  1. 定义与用途

    • <audio>标签:是HTML5提供的一个元素,用于在网页上嵌入音频内容,如音乐或音频流。它主要用于简单的音频播放和控制,通过添加属性(如controlsautoplay等)来实现基本的音频操作。
    • AudioContext:是Web Audio API中的一个接口,它提供了一个更强大的音频处理环境。AudioContext允许你进行更复杂的音频操作,如音频合成、音频效果添加、音频分析等。
  2. 音频格式支持

    • <audio>标签:支持多种音频格式,包括MP3、WAV、Ogg等。你可以直接在src属性中指定音频文件的路径,浏览器将根据其支持的格式来播放音频。
    • AudioContext:对音频格式的支持主要依赖于解码器,但它提供了更灵活的音频数据处理方式,不局限于特定的文件格式。
  3. 播放与控制

    • <audio>标签:通过HTML和浏览器提供的内置控件(如播放/暂停按钮)进行播放和控制。你也可以通过JavaScript来访问和操作<audio>元素,以实现更复杂的控制逻辑。
    • AudioContext:使用JavaScript和Web Audio API进行编程控制。你可以创建音频源、连接音频节点、应用音频效果等,以实现对音频的精确控制和处理。
  4. 音频处理与效果

    • <audio>标签:提供基本的音频播放和控制功能,但通常不提供复杂的音频处理或效果。
    • AudioContext:提供了丰富的音频处理效果和工具,如混响、合唱、均衡器、压缩器等。你可以使用这些效果和工具来创建复杂的音频效果,满足各种音频应用的需求。
  5. 应用场景

    • <audio>标签:适用于简单的音频播放和控制场景,如背景音乐、音效等。
    • AudioContext:适用于需要复杂音频处理和分析的场景,如音乐制作、音频可视化、游戏音效等。
  6. 浏览器兼容性

    • <audio>标签:在主流浏览器中都有较好的兼容性。
    • AudioContext:虽然大多数现代浏览器都支持Web Audio API和AudioContext,但在一些较旧的浏览器或特定版本的浏览器中可能存在兼容性问题。

综上所述,<audio>标签和AudioContext在定义、用途、音频格式支持、播放与控制、音频处理与效果以及应用场景等方面都存在明显的区别。选择使用哪种方式播放音频取决于你的具体需求和目标。

2、使用 audioContext 解码,播放 arraybuffer 资源:

下载一个音频链接,得到 arraybuffer,使用 audioContext 解码后进行播放;

dart 复制代码
 downloadAudio() {
      axios({
        method: 'get',
        url: this.audioUrl,
        responseType: 'arraybuffer'
      }).then(res => {
        if (!res) {
          return;
        }

        console.log("decodeAudioData")

        this.playAudio(res.data)
      }).catch(error => {
        console.error('下载音频时出错:', error);
      });;
    },
    playAudio(audioData) {
      const audioContext = new AudioContext();
      audioContext.decodeAudioData(audioData, function (decodedData) {
        const source = audioContext.createBufferSource();
        source.buffer = decodedData;
        source.connect(audioContext.destination);
        source.start();
      }, function (error) {
        console.error('解码音频数据时出错:', error);
      });
    },

3、使用播放 arraybuffer 资源:

dart 复制代码
<audio ref="audioPlayer" controls></audio>
dart 复制代码
 downloadAudio() {
      axios({
        method: 'get',
        url: this.audioUrl,
        responseType: 'arraybuffer'
      }).then(res => {
        if (!res) {
          return;
        }

        console.log("decodeAudioData")

        this.playAudio(res.data)
      }).catch(error => {
        console.error('下载音频时出错:', error);
      });;
    },
    playAudio(audioData) {
      // 将 ArrayBuffer 转换为 Uint8Array
      const uint8Array = new Uint8Array(audioData);
      // 创建 Blob 对象
      const blob = new Blob([uint8Array], { type: 'audio/mp3' });
      // 创建音频 URL
      const audioURL = URL.createObjectURL(blob);
      // 获取 <audio> 元素
      const audioElement = this.$refs.audioPlayer;
      // 设置 <audio> 元素的 src
      audioElement.src = audioURL;
      // 播放音频
      audioElement.play();
     }
相关推荐
xcLeigh5 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
韩曙亮6 小时前
【FFmpeg】FFmpeg 内存结构 ③ ( AVPacket 函数简介 | av_packet_ref 函数 | av_packet_clone 函数 )
ffmpeg·音视频·avpacket·av_packet_clone·av_packet_ref·ffmpeg内存结构
9527华安10 小时前
FPGA实现PCIE3.0视频采集转10G万兆UDP网络输出,基于XDMA+GTH架构,提供工程源码和技术支持
网络·fpga开发·udp·音视频·xdma·pcie3.0·万兆网
电子科技圈10 小时前
XMOS携手合作伙伴晓龙国际联合推出集成了ASRC等功能的多通道音频板
科技·嵌入式硬件·mcu·物联网·音视频·iot
码码哈哈0.011 小时前
免费的视频混剪综合处理工具介绍与下载
音视频
莫固执,朋友11 小时前
网络抓包工具tcpdump 在海思平台上的编译使用
网络·ffmpeg·音视频·tcpdump
深海呐11 小时前
Android 从本地选择视频,用APP播放或进行其他处理
android·音视频·从本地选择视频,用app播放·从本地选择视频,并拿到信息·跳转到本地视频列表
cuijiecheng201812 小时前
音视频入门基础:MPEG2-TS专题(6)——FFmpeg源码中,获取MPEG2-TS传输流每个transport packet长度的实现
ffmpeg·音视频
安静读书15 小时前
Java解析视频FPS(帧率)、分辨率信息
java·python·音视频
VisionX Lab17 小时前
数据脱敏工具:基于 FFmpeg 的视频批量裁剪
python·ffmpeg·音视频