audio 音频基于plyr.js

112 阅读 0 评论 74 点赞

我是靠谱客的博主贪玩时光，最近开发中收集的这篇文章主要介绍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/#options
    let 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 console
    window.player = player;

</script>
</body>
</html>