至尊宝 / 文章背景音乐插件

至尊宝

文章背景音乐插件

作者:至尊宝

创建:2024-9-26阅读:1141评论:0

音乐是一种跨越语言和文化的情感表达方式。它能够直接触动人心,让我们在旋律与歌词中找到共鸣,无论是快乐、悲伤、思念还是激情,音乐都能成为情感的出口,帮助我们释放内心的情绪,获得心灵的慰藉。 编辑器内嵌...

音乐是一种跨越语言和文化的情感表达方式。它能够直接触动人心,让我们在旋律与歌词中找到共鸣,无论是快乐、悲伤、思念还是激情,音乐都能成为情感的出口,帮助我们释放内心的情绪,获得心灵的慰藉。



编辑器内嵌播放器,单曲版

[yyMusic]mid=4,autoplay=false[/yyMusic]

[yyMusic]mid=2,autoplay=false[/yyMusic]



编辑器内嵌播放器,列表版

[yyMusic]mid=1|2|3|5,autoplay=true[/yyMusic]



该播放器并不局限于该插件,单独拿出来使用也是很方便的, 方法也很简单,引入yy_music.css和yy_music.js,然后调用

<div class="yy_music"></div>
<script>
var yyMusic = new yyMusic({
    elem: ".yy_music",      //播放器容器
    name: "夜雨博客",       //自定义播放器名称
    autoplay: false,        //自动播放
    loop: false,            //单曲有效,无脑循环
    SinglePlay: true,       //true:单一播放;false:多个播放器同时播放
    volume: 0.8             //音量
});

/******** 传入Object即为单曲,目前支持四个参数 SongName,SongUrl,SongLrc,SongPoster *********/
yyMusic.PlayData(
    {"SongName":"音乐名称","SongUrl":"http://www.xxxxx.com/xxx.mp3","SongLrc":"http://www.xxxxx.com/xxx.lrc","SongPoster":"http://www.xxxxx.com/xxx.jpg"}
);

/********* 如果是要传入多个音频,传入数组即可,`mid`(不重复的数字)和`SongUrl`(播放地址:直连)为必传值 *********/
yyMusic.PlayData(
    [
        {"mid": 1,"SongName":"音乐名称","SongUrl":"http://www.xxxxx.com/xxx.mp3","SongLrc":"http://www.xxxxx.com/xxx.lrc","SongPoster":"http://www.xxxxx.com/xxx.jpg"},
        {"mid": 10,"SongName":"音乐名称","SongUrl":"http://www.xxxxx.com/xxx.mp3","SongLrc":"http://www.xxxxx.com/xxx.lrc","SongPoster":"http://www.xxxxx.com/xxx.jpg"},
        {"mid": 15,"SongName":"音乐名称","SongUrl":"http://www.xxxxx.com/xxx.mp3","SongLrc":"http://www.xxxxx.com/xxx.lrc","SongPoster":"http://www.xxxxx.com/xxx.jpg"},
    ]
);

/******** 另外,播放器还加入了监听方法,返回Object ********/
yyMusic.on((e)=>{
    console.log(e);   //F12进入控制台查看效果
});

</script>
    暂无目录