Loading [MathJax]/jax/output/CommonHTML/config.js
部署DeepSeek模型,进群交流最in玩法!
立即加群
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >网站插入 Aplayer/网易云 音乐播放器

网站插入 Aplayer/网易云 音乐播放器

作者头像
十玖八柒
发布于 2022-07-28 08:19:55
发布于 2022-07-28 08:19:55
3.7K00
代码可运行
举报
运行总次数:0
代码可运行

安装插件

插件需要在Hexo中使用

安装hexo-tag-aplayer插件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm install --save hexo-tag-aplayer

为了方便操作,直接使用Aplayer插件中的MetingJS (基于Meting API 的 APlayer 衍生播放器) 在 Hexo 配置文件 _config.yml 中设置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
aplayer:
  meting: true

不安装插件

同样也是使用的Aplayer中的MetingJS 直接在界面中引入alplayer和meting需要的css文件和js文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

配置使用

引入完Aplayer中和MetingJS后,就可以在界面中中使用 MetingJS 播放器了; 单曲:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{% meting "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

预览:

歌单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{% meting "5068325488" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

预览:

相关配置:

列1

列2

列3

选项

默认值

描述

id

必须值

歌曲 id / 播放列表 id / 相册 id / 搜索关键字

server

必须值

音乐平台: netease, tencent, kugou, xiami, baidu

type

必须值

song, playlist, album, search, artist

fixed

false

开启固定模式

mini

false

开启迷你模式

loop

all

列表循环模式:all, one,none

order

list

列表播放模式: list, random

volume

0.7

播放器音量

lrctype

0

歌词格式类型

listfolded

false

指定音乐播放列表是否折叠

storagename

metingjs

LocalStorage 中存储播放器设定的键名

autoplay

true

自动播放,移动端浏览器暂时不支持此功能

mutex

true

该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停

listmaxheight

340px

播放列表的最大长度

preload

auto

音乐文件预载入模式,可选项: none, metadata, auto

theme

#ad7a86

播放器风格色彩设置

使用音乐平台提供插件

不使用Aplayer播放器; 以网易云为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链。

可以在自己博客页面中嵌入插件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<iframe 
 frameborder="no" border="0" 
 marginwidth="0" marginheight="0" 
 width=100% height=321 
 src="//music.163.com/outchain/player?type=0&id=5068325488&auto=0&height=430">
</iframe>

效果:

后记

toc点击后点击后无法跳转问题,原因是aplayer播放器与toc不兼容; 解决方法: 引入此js,替换掉aplayer原本的js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Android PC投屏简单尝试(录屏直播)3—软解章(ImageReader+FFMpeg with X264)
通过ImageReader的回调,我们就可以得到截屏的数据了。第一遍文章是通过自定义的Socket 协议进行传输。这里通过FFmpeg,将得到的数据进行软件编码,然后同样通过RTMP进行推流。
deep_sadness
2018/12/14
1.7K0
Android PC投屏简单尝试(录屏直播)3—软解章(ImageReader+FFMpeg with X264)
FFMPEG视频开发:Linux使用FFMPEG采集摄像头数据保存为MP4文件存储(采集摄像头数据方式使用ffmpeg本身的接口)
关于Linux下X264和FFMPEG库的编译安装方法参考这里:https://blog.csdn.net/xiaolong1126626497/article/details/104919095
DS小龙哥
2022/01/12
2.6K1
FFMPEG视频开发:Linux使用FFMPEG采集摄像头数据保存为MP4文件存储(采集摄像头数据方式使用ffmpeg本身的接口)
最简单的基于FFMPEG的视频编码器(YUV编码为H.264)
=====================================================
全栈程序员站长
2022/09/13
6680
最简单的基于FFMPEG的视频编码器(YUV编码为H.264)
Linux下交叉编译FFMPEG与X264库:目标板友善之臂Tiny4412开发板_EXYNOS4412(ARMV7_32位)
下载地址: https://www.videolan.org/developers/x264.html
DS小龙哥
2022/01/12
2.6K0
Linux下交叉编译FFMPEG与X264库:目标板友善之臂Tiny4412开发板_EXYNOS4412(ARMV7_32位)
ffmpeg android视频解码
要解码,我们需要获取解码器AVCodec,解码器我们需要通过codec_id获取,codec_id我们需要通过AVStream获取,AVStream我们需要通过AVCodecContext获取,AVCodecContext我们要根据AVFormatContext获取,解码的时候我们要通过AVFormatContext读取,解码数据存储在AVFrame里面,编码数据存储在AVPacket里面。
曾大稳
2018/09/11
1.4K0
ffmpeg android视频解码
ffmpeg的H.264解码
FFmpeg_allluckly.cn.png 新建工程,导入由Mac编译ffmpeg获取FFmpeg-iOS编译好的FFmpeg-iOS,然后导入系统依赖的库 AudioToolbox.framework CoreMedia.framework VideoToolbox.framework libiconv.tbd libbz2.tbd libz.tbd 编译的时候报错: 'libavcodec/avcodec.h' file not found ,修改Header search paths 里的路径:
Bison
2018/07/04
1.8K0
Android FFmpeg音视频编码(十六)
上一章,我们了解ffmpeg的解封装,解码过程,这一章我们来了解一下ffmpeg是怎样进行编码,和封装工作的,工作流程如下图所示:
PengJie
2021/01/17
1.9K0
利用FFmpeg对火眼一体摄像机的回调数据进行处理:YUV转H264,H264封装flv,所有输入都是在内存中。
整个工程代码下载地址 http://download.csdn.net/download/gongluck93/10175326 Code //#define WIN32_LEAN_AND_MEAN// 从 Windows 头中排除极少使用的资料 #include <WinSock2.h> #include <Windows.h> #include <stdio.h> #include <queue> #include "VzLPRClientSDK.h" using namespace std; /
_gongluck
2018/03/08
2.1K0
linux下使用QT调用FFMPEG读取摄像头一帧数据显示到标签控件上
下面代码调用FFMPEG库,读取摄像头的一帧数据,转换为RGB888,加载到QImage,再显示到标签控件上。
DS小龙哥
2022/01/12
1.8K0
linux下使用QT调用FFMPEG读取摄像头一帧数据显示到标签控件上
最简单的基于FFmpeg的直播系统开发移动端例子:IOS 视频解码器
本文记录IOS平台下基于FFmpeg的视频解码器。该示例C语言的源代码来自于《最简单的基于FFMPEG+SDL的视频播放器》。相关的概念就不再重复记录了。
云豹kj的晨曦
2020/09/04
4670
最简单的基于FFmpeg的直播系统开发移动端例子:IOS 视频解码器
FFMPEG音视频开发指南(一)
FFmpeg是一款开源软件,用于生成处理多媒体数据的各类库和程序。FFmpeg可以转码、处理视频和图 片(调整视频、图片大小,去噪等)、打包、传输及播放视频。作为最受欢迎的视频和图像处理软件, 早已经被各行各业的不同公司所广泛使用。
DS小龙哥
2022/10/06
3.3K0
FFMPEG音视频开发指南(一)
图像处理基础(五)-ffmpeg YUV转化为JPEG并保存
int yuv420_to_jpg(void *data,int w,int h,char *file) { av_register_all(); AVFormatContext *pFormatCtx = avformat_alloc_context(); AVOutputFormat *fmt = av_guess_format("mjpeg", NULL, NULL); pFormatCtx->oformat = fmt; if (avio_open(&pFor
Pulsar-V
2019/03/12
2.4K0
SDL2库(2)-Android 端集成FFmpeg及简单的播放器
项目位置 https://github.com/deepsadness/SDLCmakeDemo
deep_sadness
2018/12/14
1.7K0
SDL2库(2)-Android 端集成FFmpeg及简单的播放器
安卓ffmpeg_有什么好用的视频解码
将封装格式解压后可以得到压缩过的音视频等. 将压缩过的视频解压后可以得到 视频像素数据(RGB,YUV等).常见的视频压缩格式有H.264, MPEG4等…
全栈程序员站长
2022/11/08
1.7K0
安卓ffmpeg_有什么好用的视频解码
使用ffmpeg dxva技术解码
ffmpeg中已经实现了使用dxva加速解码部分代码。但是要整合在自己的播放器中dxva相关管理代码没有实现。
雪影
2018/08/02
3K0
最简单的FFmpeg YUV420P图像拼接实例
在项目中需要将解码出来的l两个YUV420P格式的图像合并在一起,然后重新编码为H264,最后封装为mp4文件。主要说明一下两个YUV420P使用FFmpeg合并的过程,需要提前理解YUV420P格式图像的存储结构,然后依次将Y、U、V数据分别写进去就可以了。 举例:将两张相同大小的图片合并为一张大图片 640*320 640*320 合并为1280*320 假设YUV420P的宽度为FRAMEWITH 高度为FRAMEHEIGTH, Y存储在 FRAMEWITH*2/3 U存储在 FRAMEWITH*2/3—FRAMEWITH*5/6 V存储在 FRAMEWITH*5/6—FRAMEWITH 本实例主要将FFmpeg解码出来的YUV420P数据进行合并,然后写为一个YUV文件。
望天
2019/05/26
3K0
FFmpeg简单转码程序--视频剪辑
学习了雷神的文章,慕斯人分享精神,感其英年而逝,不胜唏嘘。他有分享一个转码程序《最简单的基于FFMPEG的转码程序》其中使用了filter(参考了ffmpeg.c中的流程),他曾说想再编写一个不需要filter的版本,可惜未有机会。恰好工作中有相关ffmpeg处理内容,故狗尾续貂,撰写本文。
jacker
2018/09/01
8.6K0
FFmpeg简单转码程序--视频剪辑
基于最简单的FFmpeg采样读取内存读写:存储转
=====================================================
全栈程序员站长
2022/07/11
9790
基于最简单的FFmpeg采样读取内存读写:存储转
ffmpeg 视频解码h264和yuv
之前学习 ffmpeg 在 android 平台上,发现很不方便,所以打算在 vs 上重新搭建环境,然后重新学习,之后如果需要用到的话在移植到其他平台。环境搭建参考的是: https://blog.csdn.net/weixinhum/article/details/37699025
曾大稳
2018/09/11
4.4K0
ffmpeg 视频解码h264和yuv
最简单的基于FFMPEG的音频编码器(PCM编码为AAC)
本文介绍一个最简单的基于FFMPEG的音频编码器。该编码器实现了PCM音频採样数据编码为AAC的压缩编码数据。编码器代码十分简单,可是每一行代码都非常重要。通过看本编码器的源码。能够了解FFMPEG音频编码的流程。
全栈程序员站长
2022/07/08
1.3K0
最简单的基于FFMPEG的音频编码器(PCM编码为AAC)
推荐阅读
相关推荐
Android PC投屏简单尝试(录屏直播)3—软解章(ImageReader+FFMpeg with X264)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验