需要使用hls插件

首先安装依赖npm install hls.js --save

<audio ref="audio"></audio>
import Hls from 'hls.js';
methods: {
init(){
if (Hls.isSupported()) {
var hls = new Hls();// 实例化 Hls 对象
hls.loadSource('https://s.music.com/s/000000000/000_00000.m3u8');// 传入路径
hls.attachMedia(this.$refs.audio);
hls.on(Hls.Events.MANIFEST_PARSED, () => {//加载成功
setTimeout(() => {
console.log(this.$refs.audio)
this.$refs.audio.play();// 调用播放 API
}, 0)
});
}
}
}

  

在H5页面播放m3u8音频文件的更多相关文章

  1. iOS从零开始学习直播之音频1.播放本地音频文件

      现在直播越来越火,俨然已经成为了下一个红海.作为一个资深码农(我只喜欢这样称呼自己,不喜欢别人这样称呼我),我必须赶上时代的潮流,开始研究视频直播.发现视屏直播类的文章上来就讲拉流.推流.采集.美 ...

  2. 用 Qt 的 QAudioOutput 类播放 WAV 音频文件

    用 Qt 的 QAudioOutput 类播放 WAV 音频文件 最近有一个项目,需要同时控制 4 个声卡播放不同的声音,声音文件很简单就是没有任何压缩的 wav 文件. 如果只是播放 wav 文件, ...

  3. AVAudioPlayer播放在线音频文件

    AVAudioPlayer播放在线音频文件 一:原里: AVAudioPlayer是不支持播放在线音频的,但是AVAudioPlayer有一个 initWithData的方法:我们可以把在线音频转换为 ...

  4. Windows实现桌面录屏、指定窗口录制直播,低延时,H5页面播放

    接着前面记录的3种方式实现桌面推流直播: 1.Windows 11实现录屏直播,搭建Nginx的rtmp服务 的方式需要依赖与Flash插件,使用场景有限 2.Windows 11实现直播,VLC超简 ...

  5. Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决

    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...

  6. 使用WaveOut API播放WAV音频文件(解决卡顿)

    虽然waveout已经过时,但是其api简单,有些时候也还是需要用到. 其实还是自己上msdn查阅相应api最靠谱,waveout也有提供暂停.设置音量等接口的,这里给个链接,需要的可以自己查找: h ...

  7. H5播放需要解密的m3u8音频文件

    <audio ref="audio"></audio> import CryptoJS from "crypto-js"; import ...

  8. 移动端h5 实现多个音频播放

    前一段时间做到一个项目,其中用到很多之前没用过的东西,其中一个就是h5的多音频实现,背景音频和说话同时播放,其中出现了很多问题,不过总算找到了解决方案. 平时做H5如果只有一个音乐的话就直接在页面里面 ...

  9. 多浏览器播放wav格式的音频文件

    html5的audio标签只在火狐下支持wav格式的音频播放,无法兼容IE和google , 使用audioplayer.js 基本上能支持大部分浏览器播放wav音频文件,经测试IE.火狐.googl ...

随机推荐

  1. 一次 Go 程序 out of memory 排查及反思

    前言 最近在搞数据导出模块,在测试大文件下载的过程中,报了 Out of memory (OOM) 错误,因为之前没有遇到过这类问题,导致此次排查问题花费了大半天,也走了不少弯路,特此复盘记录. 现象 ...

  2. 要求用户输入若干员工信息,格式为: name,age,gender,salary,hiredate

    package day06; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util. ...

  3. 深入源码,深度解析Java 线程池的实现原理

    java 系统的运行归根到底是程序的运行,程序的运行归根到底是代码的执行,代码的执行归根到底是虚拟机的执行,虚拟机的执行其实就是操作系统的线程在执行,并且会占用一定的系统资源,如CPU.内存.磁盘.网 ...

  4. [bug] docker: Error response from daemon: Conflict. The container name "/xx" is already in use

    改名.删除或重启容器 参考 https://www.cnblogs.com/youxin/p/12993816.html

  5. python3.7[列表] 索引切片

    python3.7[列表] 索引  切片 排序     #### 列表.sort 永久排序   sorted(列表) 临时排序   ### >>> print(sorted(a))[ ...

  6. Ubuntu编译安装TrinityCore3.3.5

    系统:Ubuntu 14.04.4 LTS (GNU/Linux 3.13.0-32-generic x86_64) 1核2G Notice:内存不可过小,否则会编译失败 #安装一堆东西 4 apt- ...

  7. 源码安装Apache(httpd)

    [RHEL8] !!!测试环境我们首关闭防火墙和selinux [root@localhost ~]# systemctl stop firewalld [root@localhost ~]# sys ...

  8. Linux_进程管理相关命令

    一.进程管理命令 1.ps -- 进程查看命令 1️⃣:ps(process state)命令用于列出当前的进程 2️⃣:可以显示详细的进程信息,包括: 用户识别符(UID),它确定进程的特权 唯一进 ...

  9. Windows10查看电脑的USB接口是2.0还是3.0

    Windows10查看电脑的USB接口是2.0还是3.0原创小晓酱手记 最后发布于2019-08-22 16:09:48 阅读数 3662 收藏展开 同事要拷贝资料给我,问我电脑的USB接口是2.0还 ...

  10. Linux 目录管理

    tree命令的基本使用 tree 查看当前目录的树状结构 -a 查看所有包含隐藏文件 -L 1 查看目录层级 tree /root 指定目录 根目录下的主要文件 /bin 普通用户可以执行的二进制文件 ...