我正在努力学习Cordova，但似乎资源真的很差，而且似乎没有适当的社区。
我正在尝试创建一个音乐应用，并且已经设法实现了播放/暂停功能。是的，我没有实现任何设计，因为我不知道这里发生了什么。
到目前为止，我现在想实现一个Control，并希望为Android添加本机音乐控件。
但是，npm网站指出：
[我的意思是，我几乎不了解任何事情，关于如何以及在何处调用媒体，以及如何将事件连接到Cordova中的主要Media插件。
我的代码：
<html>
<head>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="lists">
<button id=list1>Song</button>
<button id=list2>Artist</button>
<button id=list3>Album</button>
<button id=list4>Playlist</button>
</div>
<div id="imgs">
<img src="song/Song1.mp3" alt="Song">
</div>
<div class = "buttons">
<img class = "button1" id = "volumeUp" src="img/Pre.png">
<img class = "button2" id = "play&pauseAudio" src="img/Play.png">
<img class = "button3" id = "volumeDown" src="img/Next.png">
</div>
</body>
<script src="js/media.js" type="text/javascript"></script>
<script src="js/notif.js" type="text/javascript"></script>
<script src="cordova.js" type="text/javascript"></script>
</html>
body{
background-color: rgb(104, 104, 104);
margin: 0px 0px 0px 0px;
}
.buttons > img{
background-color: rgb(212, 167, 255);
border: 1px black solid;
outline: none;
border: none;
margin: auto;
width: 60px;
border-radius: 50px;
transition: 0.1s ease-in-out;
}
.buttons > img:active{
background-color: rgb(145, 115, 173);
size: 40%;
transition: 0.1s ease-in-out;
}
.buttons{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
align-items: center;
margin: auto;
padding: 10px 0px;
}
#imgs{
text-align: center;
background-color: white;
width: 300px;
height: 300px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
}
.lists > button{
border: none;
outline: none;
background-color: transparent;
font-size: 15px;
padding: auto;
margin-top: 10px;
}
.lists{
margin: auto;
text-align: center;
}
document.getElementById("play&pauseAudio").addEventListener("click", toggleAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);
var playOn = true;
var myMedia = null;
function toggleAudio() {
if(playOn==true)
{
document.getElementById("play&pauseAudio").src="img/Pause.png";
playAudio();
playOn = false;
}
else
{
document.getElementById("play&pauseAudio").src="img/Play.png";
pauseAudio();
playOn = true;
}
}
function playAudio() {
var src = "/android_asset/www/song/Song1.mp3";
if(myMedia === null) {
myMedia = new Media(src, onSuccess, onError);
function onSuccess() {
console.log("playAudio Success");
}
function onError(error) {
console.log("playAudio Error: " + error.code);
}
}
myMedia.play();
}
function pauseAudio() {
if(myMedia) {
myMedia.pause();
}
}
var volumeValue = 0.5;
function volumeUp() {
if(myMedia && volumeValue < 1) {
myMedia.setVolume(volumeValue += 0.1);
}
}
function volumeDown() {
if(myMedia && volumeValue > 0) {
myMedia.setVolume(volumeValue -= 0.1);
}
}
MusicControls.create({
track : 'Time is Running Out', // optional, default : ''
artist : 'Muse', // optional, default : ''
album : 'Absolution', // optional, default: ''
cover : '/android_asset/www/song/Song1.mp3', // optional, default : nothing
// cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)
// or a remote url ('http://...', 'https://...', 'ftp://...')
isPlaying : true, // optional, default : true
dismissable : false, // optional, default : false
// hide previous/next/close buttons:
hasPrev : true, // show previous button, optional, default: true
hasNext : true, // show next button, optional, default: true
hasClose : true, // show close button, optional, default: false
// iOS only, optional
// duration : 60, // optional, default: 0
// elapsed : 10, // optional, default: 0
// hasSkipForward : true, //optional, default: false. true value overrides hasNext.
// hasSkipBackward : true, //optional, default: false. true value overrides hasPrev.
// skipForwardInterval : 15, //optional. default: 0.
// skipBackwardInterval : 15, //optional. default: 0.
// hasScrubbing : false, //optional. default to false. Enable scrubbing from control center progress bar
// Android only, optional
// text displayed in the status bar when the notification (and the ticker) are updated
ticker : 'Now playing "Time is Running Out"',
//All icons default to their built-in android equivalents
//The supplied drawable name, e.g. 'media_play', is the name of a drawable found under android/res/drawable* folders
playIcon: 'media_play',
pauseIcon: 'media_pause',
prevIcon: 'media_prev',
nextIcon: 'media_next',
closeIcon: 'media_close',
notificationIcon: 'notification'
}, onSuccess, onError);
MusicControls.destroy(onSuccess, onError);
function events(action) {
const message = JSON.parse(action).message;
switch(message) {
case 'music-controls-next':
// Do something
break;
case 'music-controls-previous':
// Do something
break;
case 'music-controls-pause':
// Do something
break;
case 'music-controls-play':
// Do something
break;
case 'music-controls-destroy':
// Do something
break;
// External controls (iOS only)
case 'music-controls-toggle-play-pause' :
// Do something
break;
case 'music-controls-seek-to':
const seekToInSeconds = JSON.parse(action).position;
MusicControls.updateElapsed({
elapsed: seekToInSeconds,
isPlaying: true
});
// Do something
break;
// Headset events (Android only)
// All media button events are listed below
case 'music-controls-media-button' :
// Do something
break;
case 'music-controls-headset-unplugged':
// Do something
break;
case 'music-controls-headset-plugged':
// Do something
break;
default:
break;
}
}
// Register callback
MusicControls.subscribe(events);
// Start listening for events
// The plugin will run the events function each time an event is fired
MusicControls.listen();
MusicControls.updateIsPlaying(true); // toggle the play/pause notification button
MusicControls.updateDismissable(true);
MusicControls.updateElapsed({
elapsed: 208, // seconds
isPlaying: true
});
我曾尝试构建该应用，但无论如何都不会显示控制栏。我假设我必须连接一个事件吗？