为网站构建自定义 mp3 播放器 - 不知道如何编写播放上一首歌曲,播放下一首歌曲功能
Posted
技术标签:
【中文标题】为网站构建自定义 mp3 播放器 - 不知道如何编写播放上一首歌曲,播放下一首歌曲功能【英文标题】:Building custom mp3 player for website - can't figure out how to write play last song, play next song functions 【发布时间】:2013-07-27 18:32:40 【问题描述】:我正在我的网站 ustreet.com 上构建一个 mp3 播放器,它可以通过我在 html 中放置的自定义按钮进行控制。
这是它的外观图片:
JSript 具有用于播放和暂停的内置音频对象控件,我已经弄清楚了,正如您所见:
<div class = "mp3Player" style="display: inline-block; width:100%">
<audio id="music" src = "LetsDance.mp3" type = "audio/mp3"></audio>
<a class = "last" style="margin-left: 1em; float: left; display: inline-block; vertical-align:158%; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); font-size: 100%" onclick="previous()" class="button">►►</a>
<a class = "play" style="display: inline-block; vertical-align:134%;" onclick="music.play()" class="button">►</a>
<a class = "pause" style="font-weight: bold; display: inline-block; vertical-align:134%;" onclick="music.pause()" class="button">ll</a>
<a class = "next" style="margin-right: 1em; float: right; display: inline-block; vertical-align:145%; font-size: 100%" onclick = "next()" class="button">►►</a>
</div>
我还有一组 mp3 文件源名称:
mp3sources = ["a.mp3","b.mp3","c.mp3","d.mp3"];
我试图弄清楚如何编写一个函数,将这些按钮调用的音频对象与这个数组同步。首次加载站点时,播放按钮将提示 mp3sources 中的第一个字符串。单击下一个按钮将提示播放列表中的下一首歌曲,单击最后一首歌曲将提示阵列中的上一首歌曲。请帮我写这个函数——我不太擅长 JScript。我更擅长 php。
【问题讨论】:
【参考方案1】:这是完整的工作代码(为了与旧浏览器兼容,您可以使用一些flash fallback):
HTML:
<div class="mp3Player">
<audio id="music"></audio>
<a id="last" class="last" class="button">◄◄</a>
<a id="play" class="play" class="button">►</a>
<a id="pause" class="pause" class="button">ll</a>
<span id="info"></span>
<a id="next" class="next" class="button">►►</a>
</div>
JS:
function run()
var i = 0; // current song index
var songList = [
'a.mp3',
'b.mp3',
'c.mp3',
'd.mp3'];
var audiocontainer = document.getElementById('mp3Player');
var ae = document.getElementById('music');
ae.src = songList[0];
var infoDiv = document.getElementById('info');
var btnLast = document.getElementById('last');
var btnPlay = document.getElementById('play');
var btnPause = document.getElementById('pause');
var btnNext = document.getElementById('next');
//add event handlers
ae.onplay = function ()
infoDiv.innerHTML = 'Now playing #' + (i + 1) + ' ' + songList[i];
;
ae.onended = function ()
next();
;
btnPlay.onclick = function ()
//if (ae.paused)
ae.play();
//else ae.pause();
;
btnPause.onclick = function ()
ae.pause();
;
btnLast.onclick = previous;
btnNext.onclick = next;
//ae.play(); //to start playing automatically when when page is loaded
function previous()
i = (i > 0) ? i - 1 : songList.length - 1; // choose previous index
ae.setAttribute("src", songList[i]);
ae.play();
function next()
i = (i < songList.length - 1) ? i + 1 : 0; // choose next index
ae.setAttribute("src", songList[i]);
ae.play();
http://jsfiddle.net/F35Fw/5/(只有基本的css样式)http://jsfiddle.net/F35Fw/5/show(下载到电脑的源页面)
【讨论】:
效果很好,非常感谢。唯一的问题是歌曲信息没有显示。你能调查一下吗? 谢谢,也许是这样的? ;-) jsfiddle.net/F35Fw/7jsfiddle.net/F35Fw/7/show以上是关于为网站构建自定义 mp3 播放器 - 不知道如何编写播放上一首歌曲,播放下一首歌曲功能的主要内容,如果未能解决你的问题,请参考以下文章