Chrome与Firefox中HTML5 audio标签播放m3u8播放列表异常问题

你遇到的问题核心是Chrome和Firefox对本地file://协议下的HLS（m3u8）播放有严格限制，同时裸AAC分片的兼容性也不如封装在MP4容器里的格式。下面是具体的解决步骤：

1. 改用HTTP服务器提供文件（最关键的一步） #

Chrome和Firefox出于安全考虑，在file://协议下禁用了很多媒体播放相关的API，尤其是HLS流的加载。你需要把所有文件放到HTTP服务器上访问，而不是直接双击HTML文件：

• 打开终端，进入你的文件目录
• 运行Python内置的简单服务器：python -m http.server 8000（Python3环境）或者python -m SimpleHTTPServer 8000（Python2环境）
• 在浏览器中访问http://localhost:8000/audiotag.html，再点击播放按钮试试

2. 调整FFmpeg命令，生成MP4容器的音频分片 #

裸AAC流在部分浏览器中的支持性不如封装在MP4容器里的音频。修改你的FFmpeg命令，把分片格式改成MP4：

ffmpeg -i .\european-anthem-2012.mp3 -c:a aac -b:a 64k -f segment -segment_time 15 -segment_time_delta 3 -segment_list_type m3u8 -segment_list playlist_aac.m3u8 -segment_format mp4 outfile_aac-%03d.mp4

生成的m3u8播放列表会自动指向MP4分片，浏览器的兼容性会大幅提升。

3. 确认HTML标签的正确性 #

你的HTML代码已经正确设置了type="audio/x-mpegurl"，这一步无需修改，只要确保播放列表的路径在HTTP服务器环境下是正确的（所有文件在同一目录的话，路径没问题）。

为什么Edge能正常播放？ #

Edge浏览器对本地HLS流的支持策略更宽松，允许在file://协议下加载m3u8播放列表，同时对裸AAC流的兼容性也更好，所以能正常播放。

内容的提问来源于stack exchange，提问作者DDS