FGD · 轻松实现音频播放

2024-04-25 03:48:28

FGD(FE GitHub Daily)，前端 GitHub Daily，由公众号素燕组织，每天分享一个前端实用的库，旨在拓宽技术视野，为业务快速找到低成本的解决方案。

推荐理由

音频播放大概与我有缘，做 iOS 的时候做了音频播放器，做前端的时候也做了音频播放器。音频播放器做的简单点，直接基于系统提供的音频播放类或组件就好；做的难一点的需要根据音频流实时播放。最低实现成本，基于开源库，它帮你处理了各种异常情况。

Howler.js 是前端的音频播放开源库，底层实现默认采用的的是 web audio api，兜底策略采用的是 H5 提供的 audio 标签。这个库一个关键点是同时支持 wap 和 PC，而且支持自动缓存、单独或全局控制音量、一次播放多个音频、支持所有的编解码器以支持跨浏览器。

用起来非常简单：

var sound = new Howl({src: ['sound.webm', 'sound.mp3'],autoplay: true,loop: true,volume: 0.5,onend: function() {console.log('Finished!');}
});

GitHub 指数

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

Star 数 17.1k

https://github.com/goldfire/howler.js

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

FGD · 轻松实现音频播放相关推荐

iphone html5 音频播放器,iPhone应用轻松使用AVAudioPlayer音频播放
iPhone应用轻松使用AVAudioPlayer音频播放是本文要介绍的内容,iPhoneSDK中的AVFoundation框架包括的AVAudioPlayer是一个容易使用而且功能强大,基于Obje ...
H5多媒体（用面向对象的方法控制视频、音频播放、暂停、延时暂停）
视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...
Android 使用 MediaCodec API音频播放器
OpenMAX 有时缩写为"OMX",是针对多媒体处理的免版税.跨平台的例程和接口集.它主要用于嵌入式设备,在设计时考虑了效率,因此可以以优化和受控的方式处理大量多媒体数据,包括视 ...
20款可嵌入网站和博客的免费音频播放器
本文将给您提供一些免费的在线音频播放器,在线音频播放器允许任何人在他们的站点和博客上添加,比如常见的音乐网站及其他个性的网站中.在这篇文章中,我已编制了20个免费为您的网站和博客提供的音频播放器,希 ...
最好的免费WordPress音频播放器插件
出于多种原因,您可能希望在网站中嵌入音频. 例如,也许您出售自己的音乐,并希望在要求用户购买歌曲之前先预览一下,或者您可能只想拥有基于文本的帖子的音频版本. 无论哪种情况,WordPress都会提供很 ...
使用LM386的简单Arduino音频播放器和放大器
原文地址:https://circuitdigest.com/microcontroller-projects/arduino-audio-music-player 使用LM386的简单Arduino ...
视频教程-FFmpeg打造Android万能音频播放器-Android
FFmpeg打造Android万能音频播放器从事Android移动端开发多年.主导开发过直播.电商.聊天等各种类型APP和游戏SDK:熟悉Android音视频开发.底层NDK开发等:有开源项目:ht ...
web音频播放器_Web设计：如何创建一个时尚的Web音频播放器
我仍然记得在2000年代初,在线播放富媒体(音频和视频)时遇到了很多限制. 很容易就将开始视为理所当然,尤其是自从今天以来,我们有很多商店可以播放音频,例如last.fm或播放视频,例如Youtube ...
音视频开发（三十八）：ExoPlayer 音频播放器实践
通过上一篇的学习实践,我们了解了ExoPlayer的优缺点以及基本用法,今天我们进入ExoPlayer的音频播放实践,我们来一起实现一个简单的音频播放器. 目录媒体播放框架MediaSession ...

最新文章

热门文章