JavaScript的简单应用

最新推荐文章于 2024-10-18 17:51:23 发布

小李学废了

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量906

点赞数 15

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_78596239/article/details/136530525

版权

2.音乐播放器的设计与实现

2.1界面设计

主要完成音乐播放器的网页布局和样式设计,包括使用<div>标签划分区域、使用<img>标签制作CD图片、使用<input>标签制作音量进度条以及使用<button>标签制作音乐播放器系列按钮,配合CSS样式完成整个页面设计效果。效果图如下：

2.1.1使用<div>标签划分区域

可以使用块级标签<div>区分4个不同的版块:①仿CD图案;②音量调节进度条;③歌曲名称的显示;④音乐播放器相关按钮。相关 HTML5代码片段如下:

<body>

<h3>简单音乐播放器</h3>

<hr />

</body>

此时还需要CSS文件辅助渲染样式，因此在本地CSS文件夹中创建music.css文件，并在<head>首尾标签中声明对 CSS文件的引用。相关HTML5代码片段如下:

<head>

<title>简单音乐播放器</title>

<link rel="stylesheet" href="css/music.css" />

</head>

在CSS文件中为<div>标签预设统一样式:内容居中显示、外边距10像素。相关 CSS代码片段如下:

div {

text-align: center;

margin: 10px;

}

2.1.2使用<img>标签制作CD图片

本例使用了本地image文件夹中的sky.jpg图片作为音乐播放的CD图片样式，图片初始宽度和高度均为300像素。相关 HTML5代码片段如下:

</div>

使用CSS3技术设置圆形图案的相关 CSS代码片段如下：

#CDimage img {

border-radius: 50%;

}

2.1.3使用<input>标签制作音量调节进度条

可以使用HTML5表单<input>标签的新增类型 range 制作音量调节进度条。相关HTML5代码片段如下:

<div>

</div>

该进度条规定了音量最小值为0(min="0")、音量最大值为1(max="1")，并且刻度间隔为0.1(step="0.1")。

2.1.4使用<span>标签定义歌曲名称

可以使用<snan>标显示歌曲名称,方便后期切换上一首或下一首歌曲时动态变化歌曲名称的显示,相关HTML5代码片段如下:

<div>

当前正在播放：<span id="title">喜欢</span>

</div>

为方便切换歌曲时能动态地同步更新歌曲名称，需要住JavaScript用<span>标签，因此为该<span>标悠设置了id名称为 title,同样该id名称也可以自定义为其他内容。

2.1.5使用<button>标签制作音乐播放器按钮

使用<button>标签创建自定义的按钮代替<audio>标签自带的音乐播放器控件，并在<button>首尾标签之间使用<img>标签插入透明背景的png 图片表示按钮图标,将图标大小统一规定成宽度和高度均为50像素。相关HTML5代码片段如下:

<div>

</button>

</button>

</button>

</div>

为了使<button>标签只显示自定义的图标，需要在 CSS 文件中为<button>标签设置统一样式:背景为透明并且无边框。相关CSS代码片段如下:

button {

background: transparent;

border: 0;

outline: 0;

}

静态页面效果如图所示：

2.2媒体文件的载入

音乐文件的载入使用HTML5音频的<audio>标签，因为需要使用自定义的播放器按钮控件，所以不要添加controls属性，以禁用浏览器自带的音乐播放器。相关 HTML5代码片段如下:

对不起,您的浏览器不支持HTML5音频播放。

</audio>

在<audio>标签的src属性中规定了默认初始载入的媒体文件路径——本地music文件夹中的爱.mp3文件。为方便后续的JavaScript调用，为<audio>标签定义了id名称为audio，该id名称可自定义。在<audio>首尾标签之间加入了提示语句，当浏览器版本过低不支持HTML5音频时会显示该内容。

2.3控件功能的实现

2.3.1音量调节控制功能的实现

当用户拖动该进度条的刻度时音量发生了变化，因此在音量控制进度条的<input>标签上声明了οnchange="setVolume()"表示当刻度发生变化时调用JavaScript函数setVolume()来重置音量大小，函数名称可自定义。相关HTML5 代码片段添加 onchange声明后如下:

<div>

</div>

在JavaScrint中使用document.getElementByld("ID名称")的方法分别获取音频对象和音量进度条。相关HTML5代码片段如下:

// 获取音频对象

let music = document.getElementById("audio");

// 获取音量调节进度条

let volume = document.getElementById("volume");

在JavaScript中setVolume()方法的完整代码如下:

// 设置音量大小

function setVolume() {

music.volume = volume.value;

}

当用户移动音量进度条时音量值对应的刻度发生了变化,该行为荟出发进度条的onchange事件,从而调用JavaScript 中的 setVolume()方法,此时music对象的音量值volume将重置为进度条上的刻度值,因此实现了实时更新音量调节的效果。

2.3.2“播放/暂停”按钮的功能实现

对于“播放/暂停”按钮，为该按钮提供单击事件 οnclick="toggleMusic()",其中toggleMusic()方法的名称可自定义，该函数需要在 JavaScript中声明。“播放/暂停”按钮添加单击事件后的相关HTML5代码片段如下:

</button>

在JavaScript中使用document.getElementByld("ID名称")的方法获取“播放/暂停”按钮。相关JavaScript 代码片段如下:

// 获取音乐播放/暂停按钮

let toggleBtn = document.getElementById("toggleBtn");

在JavaScript中声明toggleMusic()方法，可以使用if-else语句判断当前音乐的播放状态，如果是暂停状态则继续播放，并同时更改按钮对应的图标为pause.png;反之,如果在播放中则暂停音乐,并更改按钮对应的图标为play.png。相关 JavaScript代码片段如下:

// 音乐播放与暂停切换方法

function toggleMusic() {

if (music.paused) {

music.play();

// 播放音乐

toggleBtn.innerHTML =

'<img src="image/pause.png" width="50" height="50" />';

} else {

music.pause();

// 暂停音乐

toggleBtn.innerHTML =

'<img src="image/play.png" width="50" height="50" />';

}

在按钮状态切换时分别使用了play()和pause()方法播放与暂停音频文件，同时通过重置innerHTML属性值的方式更改按钮的显示图标内容。

2.3.3“上一首”和“下一首”按钮的功能实现

为“上一首”按钮提供单击事件οnclick="lastMusic()";为“下一首”按钮提供单击事件οnclick="nextMusic()"。当用户单击对应按钮时会调用对应的JavaScript函数，函数名称同样可以自定义。这些函数需要在 JavaScript中写出才可实现相关效果。相关HTML5代码片段添加单击事件后如下:

</button>

</button>

与“播放/暂信”按钮不同，“上一首”和“下一首”按钮的单击事件不涉及按钮图标的变化，因此JavaScript不需要获取按钮对象,可直接为其添加onclick事件,无须另外声明id名称。

无论单击“上一首”或“下一首”按钮，都涉及两部分内容的更改:一是需要播放的音频文件的切换,二是在网页上显示的歌曲名称的切换。音频文件的切换需要先暂停当前正在播放的音乐，然后更改<audio>标签的src属性，使其指向新的音频文件路径，再重新播放音乐即可。歌曲名称的切换需要与音频文件的切换对应完成,当音频切换完成时重置用于显示音乐名称的<span>首尾标签中的内容即可。

因此，单击“上一首”或“下一首”,按钮进行歌曲切换是需要先获取切换的新歌曲的名称以及媒体文件路径才能进行后续的处理。解决方案是可以事先在 JavaScript中使用Array数组分别声明媒体文件来源和音乐名称，并使用变量i记录当前是第几首曲目。

以共计3首曲目为例，相关 JavaScript代码如下:

// 音乐路径列表

let list = new Array(

"image/爱.mp3",

"image/EndlessHorizon.mp3",

"image/月光下的云海.mp3"

);

// 音乐标题列表

let titleList = new Array("喜欢", "无尽的地平线", "月光下的云海");

let i = 0; // 定义当前是第几首曲目

单击“下一首”按钮对应的 JavaScript函数方法为 nextMusic()，完整代码如下：

// 切换下一首歌曲

function nextMusic() {

if (i == list.length - 1) i = 0;

else i++;

music.pause();

music.src = list[i];

title.innerHTML = titleList[i];

music.play();

}

在该方法中需要先判断当前正在播放的歌曲是否已经是播放列表中的最后一首歌曲。如果是则跳转到第一首歌曲，否则可以直接跳转下一首歌曲。因此需要先判断用于记录当前歌曲是第几首的变量i值，如果到头了则重新定义i=0，否则直接执行i++令i增加1。因为是从0开始计数的，所以最后一首歌曲的值应该是数组长度减1，即 list.length-l。

调整完变量i的值之后可以调用HTML5媒体对象中的pause()方法暂停当前音乐的插放，重置<audio>标签中的src属性值，换成新歌曲对应的文件路径。同时使用innerHTML更新<span>标签内部的歌曲名称。完成后重新执行play()方法播放新的曲目。

单击“上一首”按钮对应的JavaScript函数方法为lastMusic()．完整代码如下:

// 切换上一首歌曲

function lastMusic() {

if (i == 0) {

i = list.length - 1;

} else {

i--;

}

music.pause();

music.src = list[i];

title.innerHTML = titleList[i];

music.play();

}

在该方法中需要先判断当前正在播放的歌曲是否已经是播放列表中的第一首歌曲，如果是则跳转到最后一首歌曲，否则可以直接跳转上一首歌曲。因此需要先判断用于记录当前歌曲是第几首的变量i值，如果到头了则重新定义i=list.length-1，否则直接执行i--令i减少1。

后续令首乐暂停、重置媒体文件来源、更改曲目名称和重新播放音乐的相关代码与nextMusic()中的对应部分完全相同。

运行效果如图所示：

(a)单机“上一首”播放效果

(b)正在播放当前音乐的效果

(c)单机“下一首”播放效果

2.4完整代码展示

HTML5完整代码如下：

<!DOCTYPE html>

<head>

<title>简单音乐播放器</title>

</head>

<body>

<h3>简单音乐播放器</h3>

<hr />

对不起,您的浏览器不支持HTML5音频播放。

</audio>

</div>

<div>

</div>

<div>当前正在播放：<span id="title">喜欢</span></div>

<div>

</button>

</button>

</button>

</div>

// 获取音频对象

let music = document.getElementById("audio");

// 获取音量调节进度条

let volume = document.getElementById("volume");

// 获取音乐播放/暂停按钮

let toggleBtn = document.getElementById("toggleBtn");

// 获取当前播放播放的音乐标题

let title = document.getElementById("title");

// 音乐路径列表

let list = new Array(

"image/爱.mp3",

"image/EndlessHorizon.mp3",

"image/月光下的云海.mp3"

);

// 音乐标题列表

let titleList = new Array("喜欢", "无尽的地平线", "月光下的云海");

let i = 0; // 定义当前是第几首曲目

// 音乐播放与暂停切换方法

function toggleMusic() {

if (music.paused) {

music.play();

// 播放音乐

toggleBtn.innerHTML =

'<img src="image/pause.png" width="50" height="50" />';

} else {

music.pause();

// 暂停音乐

toggleBtn.innerHTML =

'<img src="image/play.png" width="50" height="50" />';

}

// 设置音量大小

function setVolume() {

music.volume = volume.value;

}

// 切换下一首歌曲

function nextMusic() {

if (i == list.length - 1) i = 0;

else i++;

music.pause();

music.src = list[i];

title.innerHTML = titleList[i];

music.play();

}

// 切换上一首歌曲

function lastMusic() {

if (i == 0) {

i = list.length - 1;

} else {

i--;

}

music.pause();

music.src = list[i];

title.innerHTML = titleList[i];

music.play();

}

</script>

</body>

</html>

CSS文件music.css的完整代码如下：

div {

text-align: center;

margin: 10px;

}

#CDimage img {

border-radius: 50%;

}

img {

border: 0px;

}

button {

background: transparent;

border: 0;

outline: 0;

}

小李学废了

关注

15
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫