我试图在不使用音频标签内的“控件”标签的情况下制作自定义音乐播放器。首先,我想创建类似于 SCM 音乐播放器的东西。我不会使用 SCM 提供的那个,因为它在添加到我的网站时以某种方式占用了大量空间,我还没有想出如何隐藏/显示它,因为它都在一个脚本标签中,而且它确实对Y-Slow速度有影响。
这是我想要创建的图像:
这是我目前所拥有的:https://jsfiddle.net/e13gs8qg/6/ (更新)
HTML:(已更新)
<audio id="player" class="mediaplayerclass">
<source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" />
<source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" />
</audio>
<div class="playermenuwrapper">
<button id="previoussong" class="previoussongclass">
Previous
</button>
<button id="playpause" class="playpauseclass">
play
</button>
<button id="nextsong" class="nextsongclass">
Next
</button>
<div id="songtitle" class="titleclass"></div>
</div>
CSS:
.playermenuwrapper {
text-align:center;
margin: 0px auto;
max-width:100%;
}
.previoussongclass {
display:inline-block;
width:80px;
}
.playpauseclass {
display:inline-block;
width:80px;
}
.nextsongclass {
display:inline-block;
width:80px;
}
.mediaplayerclass {
display:block;
width:150px;
height:50px;
margin: 0px auto;
}
.titleclass {
display:inline-block;
text-align:center;
margin: 0px auto;
width:250px;
}
JS:(更新)
window.player = document.getElementById('player');
var playpause = document.getElementById('playpause');
var songtitle = document.getElementById('songtitle');
changesongtitle();
player.volume = 0.3;
playpause.onclick = function () {
if (player.paused) {
changesongtitle();
player.play();
playpause.innerHTML = 'pause';
} else {
player.pause();
playpause.innerHTML = 'play';
changesongtitle();
}
}
function changesongtitle() {
var songtitle = document.getElementById('songtitle');
if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") {
songtitle.innerHTML = "Fruity Loops Own Track Copy";
}
if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") {
songtitle.innerHTML = "Fruity Loops Own Track Copy 2";
}
}
我在 stackoverflow 上看了很多关于这个的问题,但我仍然没有找到我想做的事情的答案。
如何获取正在播放的源文件的标题?(已更新)如何编写“左”和“右”按钮来更改源文件?
如何创建音量 slider ?
如何为正在播放的音频的当前持续时间创建时间线?
最后,如何显示当前时间和正在播放的音频的完整持续时间?
如何在此使用 currentTime 和 duration 属性。
最佳答案
我的理解是您想为您的特定用例构建自定义库。我建议你试试 Mediaelement.js .它有很多功能,而且几乎适用于所有浏览器。此外,由于该库是开源的,因此可以在此库之上添加一些内容,例如根据下一首和上一首更改歌曲。
我什至使用过它并在其上创建了一些自定义功能。 https://github.com/hkasera/mediaelement-markers
但在此之前,您需要了解 HTML5 音频或视频的工作原理。为此,我建议您阅读以下文章:
关于javascript - 如何使用 HTML、CSS 和 JS 制作基于音频标签的自定义音乐播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34303331/