audio 播放 后端的v3 文件流，这个流需要很长时间才能写完，只要有1s 的时长就开始播放，如何处理

于 2024-07-18 09:46:42 发布
阅读量911 收藏 14
点赞数 13
文章标签： 状态模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33192454/article/details/140504545
版权

要实现音频播放时只要有1秒的时长就开始播放，而无需等待整个音频文件流写完，可以在后端直接传输音频流并在前端使用 MediaSource Extensions (MSE) 来处理和播放音频流。这种方法允许在接收到部分音频数据后立即开始播放。

以下是详细的实现步骤：

后端实现

在后端，通过 HTTP 流传输音频数据。这里我们假设 V3 格式的音频流可以被处理为可以立即传输的音频数据。

示例 Spring Boot 控制器
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

@RestController
public class AudioStreamController {

    @GetMapping("/audio-stream")
    public ResponseEntity<InputStreamResource> streamAudio(@RequestParam String filePath) {
        try {
            InputStream inputStream = new FileInputStream(filePath); // Replace with your V3 file path
            InputStreamResource inputStreamResource = new InputStreamResource(inputStream);

            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);

            return new ResponseEntity<>(inputStreamResource, headers, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }
}

前端实现

在前端，使用 MediaSource Extensions (MSE) 来处理和播放流式音频数据。

HTML 和 JavaScript 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stream Audio</title>
</head>
<body>
    <audio id="audio" controls></audio>

    <script>
        const audio = document.getElementById('audio');
        const assetURL = 'http://localhost:8080/audio-stream?filePath=/path/to/your/audio.v3'; // Replace with your URL and file path
        const mimeCodec = 'audio/mp3; codecs="mp4a.40.2"'; // Adjust to the correct codec for your V3 file

        if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
            const mediaSource = new MediaSource();
            audio.src = URL.createObjectURL(mediaSource);

            mediaSource.addEventListener('sourceopen', () => {
                const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

                fetch(assetURL).then(response => {
                    const reader = response.body.getReader();
                    function read() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                mediaSource.endOfStream();
                                return;
                            }
                            sourceBuffer.appendBuffer(value);
                            if (audio.paused && !audio.seeking) {
                                audio.play().catch(error => {
                                    console.error('Failed to start playback:', error);
                                });
                            }
                            read();
                        }).catch(error => {
                            console.error('Error reading stream:', error);
                        });
                    }
                    read();
                });
            });
        } else {
            console.error('Unsupported MIME type or codec:', mimeCodec);
        }
    </script>
</body>
</html>

注意事项

  1. 正确的 MIME 类型：确保你使用的 mimeCodec 是正确的。对于 V3 文件，你需要确认其实际编码格式。如果 V3 文件是某种自定义或特殊格式，可能需要额外的处理步骤。
  2. 浏览器支持：确保浏览器支持 MediaSource Extensions (MSE) 和你使用的音频编码格式。
  3. 性能优化：处理流数据时，需要注意前端和后端的性能，确保流传输和处理的效率。
  4. 错误处理：增加更多的错误处理代码以应对各种可能的错误情况。

通过以上方法，你可以在前端立即播放后端传输的部分音频流，而无需等待整个音频文件的传输完成。

mimeCodec = 'audio/mp3; codecs="mp4a.40.2"'; 这个都可以设置成哪些值，可不可以根据流自适应

MediaSource 和 SourceBuffer 的 mimeCodec 需要根据实际的音频格式和浏览器支持的格式进行设置。常见的音频格式及其对应的 MIME 类型和编码器包括：

  • MP3: audio/mpeg
  • AAC (M4A): audio/mp4; codecs="mp4a.40.2"
  • Opus: audio/webm; codecs="opus"
  • Vorbis: audio/webm; codecs="vorbis"

如果你希望前端可以根据流自适应地设置 mimeCodec，你可以考虑以下方案：

  1. 通过流的前几字节判断格式：音频格式通常在流的前几字节包含特征标记，可以用来判断格式。可以通过一个小的初始请求来获取这些字节，并据此设置 mimeCodec。
  2. 通过服务器端返回的 Content-Type 头判断格式：如果后端服务器能够在响应头中包含正确的 Content-Type，前端可以据此设置 mimeCodec。

以下是一个示例，展示如何根据服务器端返回的 Content-Type 设置 mimeCodec。

前端代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stream Audio</title>
</head>
<body>
    <audio id="audio" controls></audio>

    <script>
        const audio = document.getElementById('audio');
        const assetURL = 'http://localhost:8080/audio-stream?filePath=/path/to/your/audio.v3'; // 替换为你的 URL 和文件路径

        function getMimeCodecFromContentType(contentType) {
            if (contentType.includes('audio/mpeg')) {
                return 'audio/mpeg';
            } else if (contentType.includes('audio/mp4')) {
                return 'audio/mp4; codecs="mp4a.40.2"';
            } else if (contentType.includes('audio/webm')) {
                if (contentType.includes('opus')) {
                    return 'audio/webm; codecs="opus"';
                } else if (contentType.includes('vorbis')) {
                    return 'audio/webm; codecs="vorbis"';
                }
            }
            // 添加更多判断
            return null;
        }

        fetch(assetURL).then(response => {
            const mimeCodec = getMimeCodecFromContentType(response.headers.get('Content-Type'));
            if (!mimeCodec) {
                console.error('Unsupported MIME type or codec.');
                return;
            }

            if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
                const mediaSource = new MediaSource();
                audio.src = URL.createObjectURL(mediaSource);

                mediaSource.addEventListener('sourceopen', () => {
                    const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

                    const reader = response.body.getReader();
                    function read() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                mediaSource.endOfStream();
                                return;
                            }
                            sourceBuffer.appendBuffer(value);
                            if (audio.paused && !audio.seeking) {
                                audio.play().catch(error => {
                                    console.error('Failed to start playback:', error);
                                });
                            }
                            read();
                        }).catch(error => {
                            console.error('Error reading stream:', error);
                        });
                    }
                    read();
                });
            } else {
                console.error('Unsupported MIME type or codec:', mimeCodec);
            }
        }).catch(error => {
            console.error('Fetch error:', error);
        });
    </script>
</body>
</html>

后端设置 Content-Type 示例

在 Spring Boot 控制器中返回音频流时，可以设置 Content-Type 响应头：

import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

@RestController
public class AudioStreamController {

    @GetMapping("/audio-stream")
    public ResponseEntity<InputStreamResource> streamAudio(@RequestParam String filePath) {
        try {
            InputStream inputStream = new FileInputStream(filePath); // 替换为你的 V3 文件路径
            InputStreamResource inputStreamResource = new InputStreamResource(inputStream);

            HttpHeaders headers = new HttpHeaders();
            // 假设 V3 文件是 MP3 格式，实际应根据文件格式调整
            headers.setContentType(MediaType.valueOf("audio/mpeg"));

            return new ResponseEntity<>(inputStreamResource, headers, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }
}

通过这种方式，你可以根据流的实际格式动态设置前端的 mimeCodec，实现对多种音频格式的支持。

mediaSource.addSourceBuffer(mimeCodec); 所有的mimeCodec 都给我一下

mimeCodec 的值取决于你想要支持的音频格式以及浏览器支持的情况。以下是一些常见的音频格式及其对应的 mimeCodec 值：

常见音频格式及其 mimeCodec 值

  1. MP3

    • MIME 类型: audio/mpeg
    • 编解码器: 无需指定具体编解码器
    javascript

    const mimeCodec = 'audio/mpeg';

  2. AAC (Advanced Audio Coding)

    • MIME 类型: audio/mp4
    • 编解码器: mp4a.40.2
    javascript

    const mimeCodec = 'audio/mp4; codecs="mp4a.40.2"';

  3. Opus

    • MIME 类型: audio/webm
    • 编解码器: opus
    javascript

    const mimeCodec = 'audio/webm; codecs="opus"';

  4. Vorbis

    • MIME 类型: audio/webm
    • 编解码器: vorbis
    javascript

    const mimeCodec = 'audio/webm; codecs="vorbis"';

  5. WAV (Waveform Audio File Format)

    • MIME 类型: audio/wav
    • 编解码器: 无需指定具体编解码器
    javascript

    const mimeCodec = 'audio/wav';

  6. FLAC (Free Lossless Audio Codec)

    • MIME 类型: audio/flac
    • 编解码器: 无需指定具体编解码器
    javascript

    const mimeCodec = 'audio/flac';

动态判断 mimeCodec

为实现前端自动判断 mimeCodec，可以根据服务器响应的 Content-Type 动态设置：

function getMimeCodecFromContentType(contentType) {
    if (contentType.includes('audio/mpeg')) {
        return 'audio/mpeg';
    } else if (contentType.includes('audio/mp4')) {
        return 'audio/mp4; codecs="mp4a.40.2"';
    } else if (contentType.includes('audio/webm')) {
        if (contentType.includes('opus')) {
            return 'audio/webm; codecs="opus"';
        } else if (contentType.includes('vorbis')) {
            return 'audio/webm; codecs="vorbis"';
        }
    } else if (contentType.includes('audio/wav')) {
        return 'audio/wav';
    } else if (contentType.includes('audio/flac')) {
        return 'audio/flac';
    }
    // 添加更多判断条件
    return null;
}

fetch(assetURL).then(response => {
    const mimeCodec = getMimeCodecFromContentType(response.headers.get('Content-Type'));
    if (!mimeCodec) {
        console.error('Unsupported MIME type or codec.');
        return;
    }

    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        const mediaSource = new MediaSource();
        audio.src = URL.createObjectURL(mediaSource);

        mediaSource.addEventListener('sourceopen', () => {
            const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

            const reader = response.body.getReader();
            function read() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        mediaSource.endOfStream();
                        return;
                    }
                    sourceBuffer.appendBuffer(value);
                    if (audio.paused && !audio.seeking) {
                        audio.play().catch(error => {
                            console.error('Failed to start playback:', error);
                        });
                    }
                    read();
                }).catch(error => {
                    console.error('Error reading stream:', error);
                });
            }
            read();
        });
    } else {
        console.error('Unsupported MIME type or codec:', mimeCodec);
    }
}).catch(error => {
    console.error('Fetch error:', error);
});

后端设置 Content-Type 示例

在 Spring Boot 控制器中返回音频流时，可以根据文件格式设置 Content-Type 响应头：

import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

@RestController
public class AudioStreamController {

    @GetMapping("/audio-stream")
    public ResponseEntity<InputStreamResource> streamAudio(@RequestParam String filePath) {
        try {
            InputStream inputStream = new FileInputStream(filePath); // 替换为你的 V3 文件路径
            InputStreamResource inputStreamResource = new InputStreamResource(inputStream);

            HttpHeaders headers = new HttpHeaders();
            String fileExtension = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();

            switch (fileExtension) {
                case "mp3":
                    headers.setContentType(MediaType.valueOf("audio/mpeg"));
                    break;
                case "mp4":
                case "m4a":
                    headers.setContentType(MediaType.valueOf("audio/mp4"));
                    break;
                case "webm":
                    headers.setContentType(MediaType.valueOf("audio/webm"));
                    break;
                case "wav":
                    headers.setContentType(MediaType.valueOf("audio/wav"));
                    break;
                case "flac":
                    headers.setContentType(MediaType.valueOf("audio/flac"));
                    break;
                // 添加更多格式
                default:
                    return ResponseEntity.status(HttpStatus.UNSUPPORTED_MEDIA_TYPE).body(null);
            }

            return new ResponseEntity<>(inputStreamResource, headers, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }
}

通过这种方式，你可以根据流的实际格式动态设置前端的 mimeCodec，从而实现对多种音频格式的支持。

后端 将 V3 的音频流 转成Mp3 类型的流，给我个案例，可以使用第三方jar

要将 V3 音频流转换为 MP3 音频流，推荐使用 FFmpeg 这个强大的音频和视频处理工具。可以通过 Java 调用 FFmpeg 命令来实现这个转换。为了简化与 FFmpeg 的集成，可以使用 JavaCV 这个 Java 封装库。

以下是一个使用 Spring Boot 和 JavaCV 实现的示例：

1. 添加依赖

在你的 pom.xml 文件中添加 JavaCV 和相关依赖：

xml<dependencies> <!-- Spring Boot dependencies --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- JavaCV dependencies --> <dependency> <groupId>org.bytedeco</groupId> <artifactId>javacv-platform</artifactId> <version>1.5.6</version> <!-- 最新版本 --> </dependency> </dependencies>

2. 实现后端转换和流传输

import org.bytedeco.ffmpeg.global.avcodec;
import org.bytedeco.ffmpeg.global.avformat;
import org.bytedeco.javacv.FFmpegFrameGrabber;
import org.bytedeco.javacv.FFmpegFrameRecorder;
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.io.*;

@RestController
public class AudioStreamController {

    @GetMapping("/audio-stream")
    public ResponseEntity<InputStreamResource> streamAudio(@RequestParam String filePath) {
        try {
            File v3File = new File(filePath);
            if (!v3File.exists()) {
                return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
            }

            // Convert V3 to MP3 using FFmpeg
            File mp3File = convertV3ToMp3(v3File);

            InputStream inputStream = new FileInputStream(mp3File);
            InputStreamResource inputStreamResource = new InputStreamResource(inputStream);

            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.valueOf("audio/mpeg"));

            return new ResponseEntity<>(inputStreamResource, headers, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }

    private File convertV3ToMp3(File v3File) throws IOException {
        File mp3File = File.createTempFile("converted", ".mp3");
        
        try (FFmpegFrameGrabber grabber = new FFmpegFrameGrabber(v3File);
             FFmpegFrameRecorder recorder = new FFmpegFrameRecorder(mp3File, grabber.getAudioChannels())) {
            
            grabber.start();
            recorder.setAudioCodec(avcodec.AV_CODEC_ID_MP3);
            recorder.setAudioBitrate(grabber.getAudioBitrate());
            recorder.setSampleRate(grabber.getSampleRate());
            recorder.setAudioChannels(grabber.getAudioChannels());
            recorder.start();
            
            while (grabber.grab() != null) {
                recorder.record(grabber.grab());
            }
            
            recorder.stop();
            grabber.stop();
        }
        
        return mp3File;
    }
}

3. 配置 FFmpeg

确保你已经在系统中安装了 FFmpeg，并且其可执行文件在系统的 PATH 中。

4. 运行示例

启动 Spring Boot 应用，然后通过以下 URL 测试音频流的转换和播放：

bashhttp://localhost:8080/audio-stream?filePath=/path/to/your/audio.v3

说明

  • convertV3ToMp3 方法使用 JavaCV 库中的 FFmpegFrameGrabber 和 FFmpegFrameRecorder 将 V3 文件转换为 MP3 文件。
  • 将转换后的 MP3 文件通过 HTTP 响应流传输到前端。
  • 确保在使用临时文件时进行适当的清理，以避免临时文件占用过多磁盘空间。

通过这种方式，你可以实现后端将 V3 音频流转换为 MP3 流，并在前端进行播放。

<audio src="http"> 这样的标签 加载后端的V3 流，是否需要达到一定的大小才能播放，是的话，给我理论依据，以及官方论文

使用 <audio> 标签直接加载后端的音频流时，不需要等待整个流加载完毕即可播放。然而，浏览器会根据流的加载进度和缓冲策略决定何时开始播放。以下是一些关于浏览器播放流媒体音频的理论依据和相关信息：

理论依据

  1. 浏览器的流媒体播放机制:

    • 浏览器在处理流媒体播放时，会根据缓冲区内的内容决定何时开始播放。
    • 浏览器通常会在缓冲区中有足够的数据以确保连续播放时开始播放。这是为了防止播放过程中由于网络延迟或带宽波动导致的中断。
    • 浏览器使用的缓冲策略包括缓冲区大小和缓冲时间。这些策略在不同的浏览器和设备上可能有所不同。

  2. HTML5 规范:

    • 根据 HTML5 规范, 浏览器会自动管理媒体元素的缓冲策略。浏览器必须能够在播放前将媒体资源的适当部分下载到本地，以避免在播放过程中出现缓冲不足的情况。

  3. 媒体元素的 readyState:

    • 媒体元素有一个 readyState 属性，表示媒体的加载和准备状态。该属性可能有以下几种状态：
      • HAVE_NOTHING (0): 没有关于音频/视频是否就绪的信息。
      • HAVE_METADATA (1): 元数据（比如时长和尺寸）可用，但没有足够的数据播放。
      • HAVE_CURRENT_DATA (2): 当前播放位置的数据可用，但可能没有足够的数据播放。
      • HAVE_FUTURE_DATA (3): 当前和至少下一帧的数据可用，可以开始播放，但可能不会持续播放。
      • HAVE_ENOUGH_DATA (4): 有足够的数据播放，可以持续播放。

相关文献和资源

虽然没有特定的官方论文直接讨论浏览器对流媒体音频的缓冲策略，但以下资源提供了详细的背景和技术规范：

  1. HTML5 Specification:

    • 官方 HTML5 规范详细描述了媒体元素的行为、属性和事件。
    • HTML Living Standard - Media elements

  2. W3C Web Media API:

    • W3C 的 Web Media API 规范详细描述了浏览器如何处理和播放媒体内容，包括流媒体。
    • W3C Web Media API

  3. Mozilla Developer Network (MDN):

示例代码

以下是一个使用 <audio> 标签直接加载后端音频流的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Stream</title>
</head>
<body>
    <audio id="audio" controls></audio>

    <script>
        const audio = document.getElementById('audio');
        audio.src = 'http://localhost:8080/audio-stream?filePath=/path/to/your/audio.v3';

        audio.addEventListener('canplay', () => {
            console.log('Audio can start playing without stopping.');
            audio.play().catch(error => console.error('Failed to start playback:', error));
        });

        audio.addEventListener('waiting', () => {
            console.log('Audio is waiting for more data.');
        });

        audio.addEventListener('playing', () => {
            console.log('Audio is playing.');
        });

        audio.addEventListener('error', (event) => {
            console.error('Error occurred while playing audio:', event);
        });
    </script>
</body>
</html>

通过这种方式，你可以加载和播放 V3 音频流。注意，这个示例假设后端提供了一个可以连续输出音频流的 URL。浏览器会根据缓冲区的状态和数据可用性自动决定何时开始播放。

audio.addEventListener('canplay', () => { 当可以播放的时候，打印此时获取到的流大小，以kb为单位

要在音频可以播放时打印流大小，你可以通过监听 canplay 事件并检查 audio.buffered 属性。audio.buffered 返回 TimeRanges 对象，它包含了已缓冲的音频片段。虽然 TimeRanges 对象没有直接提供已缓冲数据的大小，但你可以间接估算已缓冲数据的大小。以下是一个示例代码：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Stream</title>
</head>
<body>
    <audio id="audio" controls></audio>

    <script>
        const audio = document.getElementById('audio');
        audio.src = 'http://localhost:8080/audio-stream?filePath=/path/to/your/audio.v3';

        let totalBufferedBytes = 0;

        // Fetch audio stream
        fetch(audio.src).then(response => {
            const reader = response.body.getReader();
            function read() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        return;
                    }
                    // Update total buffered bytes
                    totalBufferedBytes += value.byteLength;
                    read();
                }).catch(error => {
                    console.error('Error reading stream:', error);
                });
            }
            read();
        });

        audio.addEventListener('canplay', () => {
            console.log('Audio can start playing without stopping.');
            console.log(`Buffered size: ${(totalBufferedBytes / 1024).toFixed(2)} KB`);
            audio.play().catch(error => console.error('Failed to start playback:', error));
        });

        audio.addEventListener('waiting', () => {
            console.log('Audio is waiting for more data.');
        });

        audio.addEventListener('playing', () => {
            console.log('Audio is playing.');
        });

        audio.addEventListener('error', (event) => {
            console.error('Error occurred while playing audio:', event);
        });
    </script>
</body>
</html>

说明

  1. 总缓冲字节数:

    • 使用 fetch 获取音频流，并通过 ReadableStreamDefaultReader 的 read() 方法读取流数据。
    • 每次读取到的数据片段都会累加到 totalBufferedBytes 变量中，以便计算总缓冲大小。

  2. canplay 事件:

    • 监听 canplay 事件，在音频可以播放时打印已缓冲数据的大小（以 KB 为单位）。

注意事项

  • 此示例假设你能够通过 fetch API 获取音频流。如果音频流直接通过 <audio> 元素加载，则需要确保跨域策略允许该操作。
  • 浏览器在处理流媒体时可能存在缓存和优化策略，因此获取的字节数可能与实际播放的数据量有所不同。这个示例提供了一种间接估算已缓冲数据大小的方法。

为什么直接用<audio src> 的时候，要达到 200多kb才能开始播放

在使用 <audio> 元素加载音频流时，需要一定大小的缓冲区来确保流畅的播放体验。这种需求主要受以下因素影响：

  1. 缓冲策略和网络延迟:

    • 浏览器会根据当前网络条件和缓冲策略决定何时开始加载和播放音频流。
    • 当你通过 <audio src="URL"> 指定音频流时，浏览器会尝试预加载一定量的数据，以确保可以连续播放而不中断。这个预加载的大小可以根据浏览器和设备的不同而有所不同。

  2. 缓冲区大小:

    • 浏览器使用的缓冲区大小和缓冲时间取决于其内部的策略和配置。
    • 在某些情况下，浏览器可能需要达到一定的缓冲区大小（比如 200KB），才会开始播放音频流，以确保在网络状况变化或延迟出现时仍能保持稳定的播放状态。

  3. 网络延迟和带宽:

    • 当网络延迟较高或带宽较低时，浏览器可能需要更大的初始缓冲区来避免播放中断或缓冲过程中的停顿。

解决方案

虽然不能直接控制浏览器的缓冲行为，但可以通过以下方式尽可能优化和改善播放体验：

  • 优化音频编码和传输：确保音频文件以适当的比特率和编码方式传输，以最小化加载时间和缓冲需求。
  • 预加载音频数据：在需要提前播放的场景中，可以通过 JavaScript 先加载音频数据，以提前填充缓冲区。
  • 调整服务器响应头：确保服务器设置了适当的缓存控制和跨域策略，以避免因为网络问题导致的加载延迟。

总体而言，虽然浏览器的具体缓冲行为可能会有所不同，但提供足够的缓冲数据是确保流畅播放的关键。

qq_33192454
关注
  • 13
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java获取播放文件的时长
05-30
以上就是使用Java获取播放文件时长的几种常见方法。需要注意的是，每种方法都有其适用范围，比如对于不同的文件格式，可能需要选择不同的库或方法。同时，这些方法可能需要处理错误和异常，以及适当地释放资源，确保...
getID3 获取音乐文件播放时间长度
09-16
获取音乐文件播放时间长度的类 require_once('/getid3/getid3.php'); $audioServPath="201208151633466674.mp3"; $getID3 = new getID3; $audioInfo = $getID3->analyze($audioServPath); $duration = $...
＜audio /＞标签实现音频流或语音流播放
weixin_56383764的博客
06-18 748
标签实现音频流或语音流播放，使用fetch实现对语音在浏览器上播放
后端 流里面 拼接 .V3 类型音频的头信息，同时我还不想引入其他jar，有办法来实现么；
最新发布
qq_33192454的博客
07-17 824
播放器需要足够的数据来填充缓冲区才能开始播放。如果每秒只返回1KB的数据，大多数播放器将无法满足播放的最小缓冲要求，从而无法开始播放。为了确保顺利播放，建议提供足够的初始数据来填充缓冲区，并保持稳定的数据传输速率。那么我如果想要取消掉前端这样的缓冲区，该如何写代码取消掉前端音频播放器的缓冲区或者减少其缓冲区大小并不是直接通过前端代码来实现的，因为现代浏览器的音频播放机制以及底层实现是由浏览器控制的，开发者无法完全关闭或控制它们的缓冲策略。这是为了确保平滑的播放体验。
前端播放后端传的语音流
qq_49464155的博客
03-31 3742
后端接口返回数据 Content-Type: audio/x-wav 数据Preview格式如下： 前端播放处理方式： 1 . 直接使用audio标签，src输入后端接口路径 <audio src='http://xxx.xx/api/getFile' /> 2. 请求失败需要添加提示，对数据处理 ，转为blob数据 // 1. 请求时添加 responseType: 'blob'，这样返回数据为blob数据 const res = await axios({ me
Vue接收接口返回的mp3格式数据并支持在页面播放音频
sinat_34241861的博客
04-18 2133
在实际工作中需要开发一个转音频工具，并且能够在平台页面点击播放按钮播放音频Blob对象通常用于处理大量的二进制数据，可以读取/写入/操作文件、音视频等二进制数据流。Blob表示了一段不可变的二进制数据。当你需要从服务器下载文件时，你可以将响应类型设置为’blob’，然后通过 window.URL.createObjectURL(blob) 方法创建一个表示该Blob的url，最后将这个url用于下载链接。
【web】vue 播放后端（flask）发送的 mp3 文件
m0_52733659的博客
01-01 974
【代码】【web】vue 播放后端（flask）发送的 mp3 文件。
audio播放录音
TyrionJ的博客
05-13 847
html5 audio是一个很强大的标签，项目中用到很多的就是直接给audio标签的src赋值音频文件对应的url，关于audio，网上资料很多，这里不详细介绍。本文主要讲述在项目中使用audio遇到的坑。项目前台使用vue框架1.如何将文件流转化成对应的url通过录音文件对应的uuid 获取录音对应的文件流data（bytes类型），使用let recordSrc = URL.createObj...
C#实现播放音频流
01-17
一个是demo，一个是库类，语音流来自百度语音合成，支持mp3类型的流播放，Pcm流，和其他的及几改，不会的问我。几组啦。是mp3流其他的流自己改！，嗯~ 然后呢调用了一下NAudio，嗯，没了，觉得好记得评论
smil.rar_smil_smil播放mp4_trafficnbi_流媒体
09-20
1. **定义**: 流媒体是指通过网络实时传输音视频内容的技术，用户无需等待整个文件下载完就可以开始播放。 2. **流媒体系统**: 包括内容源、流媒体服务器、网络传输和客户端播放器等部分。SMIL在这里起到的是协调和...
QT + ffmpeg 播放 rtsp,rtmp,udp视频流
08-05
QT + ffmpeg 播放 RTSP, RTMP, UDP 视频流是一个常见的技术应用场景，尤其是在多媒体开发领域。本文将详细介绍如何使用QT结合ffmpeg库来实现这些不同类型的视频流播放。 首先，QT（Qt）是一个跨平台的应用程序开发...
微信小程序获取音频时长与实时获取播放进度问题
10-18
需要注意的是，音频文件的总时长并不是在一开始就可用的。由于音频文件加载的异步性，开发者在音频文件资源加载完成之前是无法获取到audio对象的duration属性的。因此，在音频文件未加载或正在加载的阶段，打印...
iOS 本地视频和网络视频流播放实例代码
08-30
本篇文章主要介绍了iOS 本地视频和网络视频流播放实例代码，涵盖了本地视频文件播放和网络视频流播放两部分内容，使用AVFoundation.framework和MobileVLCKit.framework框架可以轻松地播放视频文件和网络视频流。
取MP3播放总长.rar
04-06
"取MP3播放总长.rar"这个文件很可能包含了一个易语言（E语言）编写的源代码，用于读取并计算MP3文件的播放时长。易语言是一种中文编程语言，旨在降低编程的难度，让更多的人能够理解和编写程序。 首先，我们要理解...
在线音频流Audio播放功能
04-03
源码是实现了在线音频流Audio播放功能，该效果有点类似我们生活中的电台播放的效果。This is a collection of basic android examples created by Novoda.
通过 web 录制视频（摄像头）并上传
张云飞Vir的专栏
04-26 3990
1.背景 想通过 web 录制视频，并将视频上传到后端要怎么实现呢？ 2.整体思路 打开摄像头 ：MediaDevices.getUserMedia() 录制：使用 MediaRecorder 内存存储：创建一个 [] 数组，存放字节，再转成 blob 对象。 上传：构建file，再到 formData，使用ajax发起HTTP 请求 3.实现方式 获得摄像头设备 MediaDevices ...
【音】MediaRecorder支持录制类型情况
点滴
03-19 4681
最近有有需求，需要捕获用户的脸部表情以及上课的表现情况， 用于提供给AI部门进行算法练习，研究了一下mediaRecorder 录制stream video/webm video/webm;codecs=vp8 video/webm;codecs=vp9 video/webm;codecs=vp8.0 video/webm;codecs=vp9.0 video/webm;codecs=h264 ...
webRTC技术篇
qq_42543548的博客
10-26 659
webRTC运行机制 轨和流 Track MediaStream 重要的类 MediaStream RTCPeerConnection（媒体流传输） RTCDataChannel（文本，文件等非视频文件流传输，通过 RTCPeerConnection 获取） webRTC使用 获取设备 音视频采集Api navigator.mediaDevices.getUserMedia getUserMedia适配 桌面数据采集 navigator.mediaDevices.getDispl
audio 播放后端传输的MP3音频流文件
07-10
要在Vue中播放后端传输的MP3音频流文件，你可以使用HTML5的`<audio>`元素和JavaScript的`Audio`对象。以下是实现的步骤： 1. 在Vue组件中，使用`<audio>`元素来创建一个播放器： ```html <audio ref="audioPlayer" controls></audio> ``` 2. 在Vue组件的`created`钩子函数中，通过后端API获取MP3音频流，并将其传递给`Audio`对象： ```javascript created() { // 调用后端API获取MP3音频流 this.getAudioStream().then(stream => { this.playAudio(stream); }); }, methods: { getAudioStream() { // 使用axios或其他库来发送请求获取MP3音频流 return axios.get('/api/audio/stream', { responseType: 'arraybuffer' }).then(response => { return response.data; }); }, playAudio(stream) { const audioContext = new AudioContext(); audioContext.decodeAudioData(stream, buffer => { const source = audioContext.createBufferSource(); source.buffer = buffer; source.connect(audioContext.destination); source.start(); this.$refs.audioPlayer.srcObject = source; }); } } ``` 在上述代码中，我们使用了`AudioContext`来解码音频流，并通过`createBufferSource`创建一个音频源。然后，我们将音频源连接到`AudioContext`的目标（通常是扬声器），并开始播放音频。最后，我们将音频源赋值给`<audio>`元素的`srcObject`属性，以便在浏览器中显示播放控件和音频。 请注意，由于涉及到音频流的解码，这可能会在一些旧版本的浏览器中存在兼容性问题。此外，你需要根据你的后端API返回的音频流格式进行适当的解码和处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值