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

Question

我正在尝试制作自定义音乐播放器而不使用音频标签内的"controls"标签.首先,我想创建类似于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上查看了很多关于此问题的问题,但我仍然没有找到我想要做的答案.

• 如何检索播放源文件的标题？ (更新)

• 如何编写"左"和"右"按钮来更改源文件？

• 如何创建音量滑块？

• 如何创建正在播放的音频当前持续时间的时间轴？

• 最后,我如何显示当前时间和正在播放的音频的整个持续时间？

如何在此使用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