javascript - 如何使用 HTML、CSS 和 JS 制作基于音频标签的自定义音乐播放器

Question

我试图在不使用音频标签内的“控件”标签的情况下制作自定义音乐播放器。首先，我想创建类似于 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 属性。

Answer 1

我的理解是您想为您的特定用例构建自定义库。我建议你试试 Mediaelement.js .它有很多功能，而且几乎适用于所有浏览器。此外，由于该库是开源的，因此可以在此库之上添加一些内容，例如根据下一首和上一首更改歌曲。

我什至使用过它并在其上创建了一些自定义功能。 https://github.com/hkasera/mediaelement-markers

但在此之前，您需要了解 HTML5 音频或视频的工作原理。为此，我建议您阅读以下文章:

1. http://html5doctor.com/html5-audio-the-state-of-play/
2. http://www.html5rocks.com/en/tutorials/webaudio/intro/
3. https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Cross-browser_audio_basics