audio 音频基于plyr.js

https://github.com/sampotts/plyr

audio 音频播放可点击切换播放

mp3 音乐自己改一下没有找到在线链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    <link rel="stylesheet" href="plyr.css">--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.css"><style>body {background-color: #ddd;}</style>
</head>
<body>
<!-- title 可以和name 换一下 -->
<div class="audioDiv" title="1.mp3" name="失眠飞行.mp3" onclick="switchAudio(this)">送别 - 朴树
</div>
<div class="audioDiv" title="2.m4a" name="公子向北走.mp3" onclick="switchAudio(this)">逝年 - 夏小虎
</div>
<div class="audioDiv" title="3.m4a" name="人间不值得.mp3" onclick="switchAudio(this)">九月的歌 - 夏小虎
</div>
<p id="po">多想在平庸的生活拥抱你 - 隔壁老樊</p>
<audio crossorigin playsinline id="audioAr"><source src="1.mp3" type="audio/mp3">
</audio>
<!-- Plyr resources and browser polyfills are specified in the pen settings -->
<!--<script src="plyr.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.js"></script>
<script>// Change "{}" to your options:// https://github.com/sampotts/plyr/#optionslet as = document.getElementById('audioAr');const player = new Plyr(as);function switchAudio(v) {player.stop();player.source = {type: 'audio',sources: [{src: v.title,type: 'audio/mp3',}],};player.play();document.getElementById('po').innerHTML = v.getAttribute("name");$(v).css({'color':'#ffffff','background':'#000000'});$(v).siblings().css({'background':'transparent', 'color':'#000000'})}// Expose player so it can be used from the consolewindow.player = player;</script>
</body>
</html>

audio 音频基于plyr.js相关推荐

js控制audio音量_js控制html5 audio音频暂停播放
js控制html5 audio音频暂停播放音乐控制音乐播放/暂停重新播放 function rbf(){ var audio = document.getElementById('music1 ...
html audio 播放amr,vue.js实现audio播放amr格式音频
纯前端解码.播放.录音.编码 AMR 音频,无须服务器支持,基于 [amr.js] 注意:由于使用了 amr.js 做编码和解码,因此 js 文件(压缩后,未 gzip)接近 500 KB,使用前请考 ...
基于Vue.js和Node.js的个人网盘系统——科技立项中期成果
基于Vue.js和Node.js的个人网盘系统个人网盘系统前端使用Vue.js框架,特别使用了Vue3支持的Element Plus组件库.后端使用Node.js提供服务.数据库使用MongoDB. ...
html5 audio音频播放全解析
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
NGINX配置基于Node.js服务的负载均衡服务器
NGINX配置基于Node.js服务的负载均衡服务器本部署指南说明了如何使用NGINX开源和NGINX Plus在Node.js应用程序服务器池之间平衡HTTP和HTTPS通信.本指南中的详细说明适 ...
html5 audio音频播放器
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
基于howler.js开发的音乐播放器
2019独角兽企业重金招聘Python工程师标准>>> howler.js 是一个新的 JavaScript 库用于处理 Web 的音频,该库最初是为一个 HTML5 游戏引擎所开发 ...
20230410----重返学习-网易云音乐首页案例-audio音频标签
day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签网易云音乐首页案例单例设计模式 const theModule = (function(){let th ...
audio 音频标签的使用及实例
audio 音频标签的使用属性值描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放. controls controls 如果出现该属性,则向用户显示音频控件(比如 ...

audio 音频基于plyr.js

audio 音频基于plyr.js相关推荐

最新文章

热门文章

audio 音频 基于plyr.js

audio 音频 基于plyr.js相关推荐

最新文章

热门文章

audio 音频基于plyr.js

audio 音频基于plyr.js相关推荐