Comments (2)
Here is my code:
以下是我的代码:
<link rel="stylesheet" href="/static/css/APlayer.min.css">
<script src="/static/js/APlayer.min.js"></script>
<div>
<table>
<tr>
<td style="text-align: center;">啊啊啊</td>
<td>
<div id="aplayer" style="width: 100%;margin:auto,height:600px;"></div></td>
<td style="text-align: center;">
<div id="player">
<pre class="aplayer-lrc-content">
[00:00.00]APlayer audio1
[00:04.01]is
[00:08.02]amazing
<!-- ... -->
</pre>
<pre class="aplayer-lrc-content">
[00:00.00]APlayer audio2
[00:04.01]is
[00:08.02]amazing
<!-- ... -->
</pre>
</div>
</td>
</tr>
</table>
</div>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
lrcType: 1,
audio: [{
name: '雨后',
artist: '123',
url: 'http://s-cd-7880-music.oss.dogecdn.com/100001.mp3',
cover: '/static/img/logo73.jpg',
},{
name: '老去',
artist: '123',
url: 'url.mp3',
cover: '/static/img/logo73.jpg'
},
]
});
ap.on('play', function (e) {
console.log(e);
if(ap.list.audios[ap.list.index].name=="雨后"){
}
;
})
</script>
page display
页面显示:
from aplayer.
我解决了部分问题。
说明文档里面的id="player" 少了个a
应该是id="aplayer"
但是歌词只能显示1-2行,希望能改进为显示10行,播放器歌词部分显示多点,这样听众可以多看看歌词上下文
或者可以把歌词部分自定义到任意位置
from aplayer.
Related Issues (20)
- How do I put aplayer with fixed mode enabled in the lower-right corner of the hexo blog instead of the lower-left corner HOT 1
- bug
- Purchase/Download button
- adaptive bitrate streaming
- how to Unbind the event handler
- Is there an API to get information about the currently playing audio?如何获取当前正在播放的音频的信息? HOT 1
- Aplayer causes the pinia-plugin-persistedstate plugin to fail
- No ap.setMusic() function
- 2个BUG 播放数注销后,定时器仍在跑;播放数参数定义为fixed:1注销后,再次生成fixed:0 仍是吸地模式
- ap.play() function not work
- Increase the number of lines displayed for lyrics
- 无法获取播放列表长度 HOT 1
- The autoplay:true setting has no effect
- dynamic update lyric. 动态更新歌词 HOT 2
- volume can't be adjusted HOT 1
- 建议添加Chrome的MediaSession全局媒体控件样式的支持 HOT 1
- Invalid player mutex attribute
- Is it possible to add a max mode?
- 不知道
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aplayer.