主页v2.1引入音效效果

233ds

前言

近期更新V2.1版本后发现很多人下载后就没有关注近期更新了，V2之后的版本是完成V1版本的BUG而更的，但v2.1是没有音效引入的，目前页面完善的部分还不足以发布下一版本，所以觉得有必要再发一次音效引入相关

你可以通过github（https://github.com/rcy1314/noisework/releases）下载

或者 https://pan.quark.cn/s/708c79ccaaa4

静态头像效果旧版本V1.3：https://pan.quark.cn/s/b19888072076

请在下载修改时替换里面的图片等带有cdn的链接为你自己或使用本地引入，如果你使用我的cdn服务会：

1、我不保证长久不失效，服务器到期后会失效

2、你搭建的服务会有我的外链，对SEO会有直接影响

然后，目前为止也还在更新，可能我觉得完善的概率大些等原因吧

相关介绍请收藏和分享配置文档地址：https://docs.noisework.cn

V2更新内容

  • 增加页面全局音效，包含鼠标点击及指定元素音效
  • 修复home页手机尺寸下背景图片挤压情况【手机端背景图参考尺寸：736 × 1308】，增加向下滑动提示
  • 优化首页模块视觉效果，调整网站模块滑动缩放
  • 增加首页图片未加载时的背景底色，使其载入过渡更自然
  • 调整修复首页点击及右键全局弹出图片效果，再点击可关闭图片
  • 调整home页头像部分为动态可切换效果，增加标题处打字机效果文字
  • 调整home页侧边背景布局效果（解决元素居中问题）
  • 添加home页侧边视频播放效果组件
  • 更改抖音去水印接口，修改摸鱼日历API

音效部分

这是为增加页面互动而存在的，如果你喜欢可以自行引入

预览一些增加的效果【不代表最新代码中不会修改音效】

预览效果

音效特征

  • 鼠标左键点击音效（不对手机尺寸生效）
  • 鼠标右键点击音效（不对手机尺寸生效）
  • 网址悬停选择模块音效
  • 广告位悬停音效
  • 指定文字的悬停音效
  • 时间悬停音效
  • 载入页面时的开机音效（一些浏览器会阻止自动播放，需要进入页面后手动点击一次触发）
  • 待添加

引入

这次是为首页和home页同时准备的，所以只需要引入同一个JS文件即可

页脚处添加

1
<script src="js/sound.js"></script>

JS文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
document.addEventListener('DOMContentLoaded', function() {
    // 预加载音效
    var leftClickSound = new Audio('../assets/sound/鼠点左2.mp3'); // 鼠标左
    var rightClickSound = new Audio('../assets/sound/风铃.mp3'); // 鼠标右
    var hoverSoundlogoDiv = new Audio('../assets/sound/门铃.mp3'); // 头像logo
    var hoverSoundavatar = new Audio('../assets/sound/门铃.mp3'); // 头像logo
    var hoverSoundfirst = new Audio('../assets/sound/开瓶.mp3'); // 首页切换风格文字
    var hoverSoundclock = new Audio('../assets/sound/叮.mp3'); // 时钟
    var hoverSounddescriptiontext1 = new Audio('../assets/sound/开瓶.mp3'); // home切换模式文字
    var hoverSounddescriptiontext3 = new Audio('../assets/sound/滴滴.mp3'); // home运行文字
    var hoverSoundcheck1 = new Audio('../assets/sound/开瓶.mp3'); // 首页右侧切换模式文字
    var hoverSoundtypingText = new Audio('../assets/sound/打字.mp3'); // home页打字机文字

    leftClickSound.preload = 'auto';
    rightClickSound.preload = 'auto';
    hoverSoundlogoDiv.preload = 'auto'; 
    hoverSoundavatar.preload = 'auto'; 
    hoverSoundfirst.preload = 'auto'; 
    hoverSoundclock.preload = 'auto'; 
    hoverSounddescriptiontext1.preload = 'auto'; 
    hoverSounddescriptiontext3.preload = 'auto'; 
    hoverSoundcheck1.preload = 'auto'; 
    hoverSoundtypingText.preload = 'auto'; 
    
    leftClickSound.load();
    rightClickSound.load();
    hoverSoundlogoDiv.load(); 
    hoverSoundavatar.load(); 
    hoverSoundfirst.load(); 
    hoverSoundclock.load(); 
    hoverSounddescriptiontext1.load(); 
    hoverSounddescriptiontext3.load(); 
    hoverSoundcheck1.load(); 
    hoverSoundtypingText.load(); 

    // 鼠标点击音效函数
    function playSound(audioObject) {
        audioObject.currentTime = 0; // 重置音频到开始
        audioObject.play();
    }

    // 检测设备类型
    function isMobileDevice() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    // 监听鼠标点击事件
    document.addEventListener('mousedown', function(event) {
        if (!isMobileDevice()) { // 如果不是移动设备
            if (event.button === 0) { // 左键点击
                playSound(leftClickSound); 
            } else if (event.button === 2) { 
                playSound(rightClickSound); // 播放右键点击音效
            }
        }
    });

    // 获取logoDiv元素
    var logoDiv = document.getElementById('logoDiv');
    if (logoDiv) {
        // 监听鼠标悬停事件
        logoDiv.addEventListener('mouseenter', function() {
            playSound(hoverSoundlogoDiv); 
        });
    } else {
        console.warn('没有找到ID为logoDiv的元素');
    }

    // 获取first元素
    var first = document.getElementById('first');
    if (first) {
        // 监听鼠标悬停事件
        first.addEventListener('mouseenter', function() {
            playSound(hoverSoundfirst); 
        });
    } else {
        console.warn('没有找到ID为first的元素');
    }

    // 获取avatar元素
    var avatar = document.getElementById('avatar');
    if (avatar) {
        // 监听鼠标悬停事件
        avatar.addEventListener('mouseenter', function() {
            playSound(hoverSoundavatar); 
        });
    } else {
        console.warn('没有找到ID为avatar的元素');
    }

    // 获取logoDiv元素
    var clock = document.getElementById('clock');
    if (clock) {
        // 监听鼠标悬停事件
        clock.addEventListener('mouseenter', function() {
            playSound(hoverSoundclock); 
        });
    } else {
        console.warn('没有找到ID为clock的元素');
    }

    // 获取descriptiontext1元素
    var descriptiontext1 = document.getElementById('descriptiontext1');
    if (descriptiontext1) {
        // 监听鼠标悬停事件
        descriptiontext1.addEventListener('mouseenter', function() {
            playSound(hoverSounddescriptiontext1); 
        });
    } else {
        console.warn('没有找到ID为descriptiontext1的元素');
    }

    // 获取descriptiontext3元素
    var descriptiontext3 = document.getElementById('descriptiontext3');
    if (descriptiontext3) {
        // 监听鼠标悬停事件
        descriptiontext3.addEventListener('mouseenter', function() {
            playSound(hoverSounddescriptiontext3); 
        });
    } else {
        console.warn('没有找到ID为descriptiontext3的元素');
    }

    // 获取check1元素
    var check1 = document.getElementById('check1');
    if (check1) {
        // 监听鼠标悬停事件
        check1.addEventListener('mouseenter', function() {
            playSound(hoverSoundcheck1); 
        });
    } else {
        console.warn('没有找到ID为check1的元素');
    }

    // 获取typingText元素
    var typingText = document.getElementById('typingText');
    if (typingText) {
        // 监听鼠标悬停事件
        typingText.addEventListener('mouseenter', function() {
            playSound(hoverSoundtypingText); 
        });
    } else {
        console.warn('没有找到ID为typingText的元素');
    }

// 元素音效
// 网址过渡音
var websiteHoverSound = new Audio('../assets/sound/缓慢1.mp3');
websiteHoverSound.preload = 'auto';

// 广告位音
var adHoverSound = new Audio('../assets/sound/滴滴.mp3');
adHoverSound.preload = 'auto';

function playSound(audioObject) {
    // 重置音频到开始并播放
    audioObject.currentTime = 0;
    audioObject.play();
}

// 为每个选择器添加音效
function addSoundToElements(selectors, sound) {
    selectors.forEach(function(selector) {
        document.querySelectorAll(selector).forEach(function(element) {
            element.addEventListener('mouseenter', function() {
                // 只有在音频暂停或结束时才播放
                if (sound.paused || sound.ended) {
                    playSound(sound);
                }
            });
        });
    });
}

// 要添加音效的元素选择器数组
var elementsSelectors = ['.iconItem', '.item', '.projectItem','.project','.switch','.menu-item'];
addSoundToElements(elementsSelectors, websiteHoverSound);

// 广告位元素选择器数组
var adElementsSelectors = ['.ad-container','.rss-container'];
addSoundToElements(adElementsSelectors, adHoverSound);

// home配置文档文字音
var hoverSoundescriptiontext2 = new Audio('../assets/sound/滴滴.mp3'); // 请替换为您的音效文件路径
hoverSoundescriptiontext2.preload = 'auto';
var escriptiontext2 = document.getElementById('descriptiontext2');
if (escriptiontext2) {
    escriptiontext2.addEventListener('mouseenter', function() {
        playSound(hoverSoundescriptiontext2); 
    });
} else {
    console.warn('没有找到ID为descriptiontext2的元素');
}



// 页面加载音效
var pageLoadSound = new Audio('../assets/sound/载入.mp3');
pageLoadSound.preload = 'auto';
pageLoadSound.muted = true; // 设置为静音，以提高自动播放的可能性

function playLoadSound() {
    pageLoadSound.currentTime = 0; // 重置音频到开始
    pageLoadSound.play().then(function() {
        console.log('音效开始播放');
        pageLoadSound.muted = false; // 如果播放成功，取消静音
        // 设置已播放标记
        localStorage.setItem('hasPlayed', 'true');
    }).catch(function(error) {
        console.error('播放失败，可能被浏览器阻止', error);
        // 如果播放失败，尝试在用户交互后播放
        document.body.addEventListener('click', function() {
            playLoadSound();
            // 移除事件监听，避免重复播放
            document.body.removeEventListener('click', arguments.callee);
        });
    });
}

// 当页面加载完成时尝试播放音效
window.addEventListener('load', function() {
    // 检查是否已经播放过
    if (!localStorage.getItem('hasPlayed')) {
        // 确保在页面加载完成后尝试播放音效
        playLoadSound();
    }
});

// 当页面卸载时，清除已播放标记
window.addEventListener('beforeunload', function() {
    localStorage.removeItem('hasPlayed');
});



    });

代码中已添加了注释，其中你可以看到我指定的一些效果，其中，增加了预加载音效，它们会在进入页面后使浏览器主动缓存效果，你可以再进行整合和优化处理代码，然后，代码中主要是对一些元素进行了音频文件定制化，基本上一个JS文件就够了

音效文件可以在我的仓库文件夹==/assets/sound/==中找到，或者https://pan.quark.cn/s/91b76bb2b787 下载

直接使用我的

如果你使用的是V2.1版本，可以选择直接HTML引入JS文件并在正确路径下放入这些音效

Html可以是

音频文件则请下载后修改为你自己喜好的路径

个别修改的元素如果在意可以看下git中的代码（不保证之后不会再修改）

  • 首页中的右侧按钮弹窗指定了切换模式（你可以忽略）
  • home页中个别描述文字指定了新的元素

修改代码为：

1
2
3
4
<div class="description">👏<span class="purpleText">欢迎访问本站！ </span> 这是来自NOISE的个人主页。</span>查看 <span class="purpleText textBackground" id="descriptiontext3"><a href="https://stats.uptimerobot.com/GoqwLuBl3o" target="_blank" style="color: red;">运行状况</a></span>
				</div>
				<div class="description" >📝点击→<span class="purpleText textBackground" id="descriptiontext1"><a href="./index.html" style="color: rgb(170, 0, 255);">切换模式</a> </span>点击获取→</span><span class="purpleText textBackground" id="descriptiontext2"><a href="https://docs.noisework.cn" style="color: rgb(51, 114, 224);">配置文档</a></span>  ，右键唤醒 <span class="purpleText textBackground">弹出</span> 菜单栏 </div>

完成后将这些文件放入service-worker.js以便于缓存加快访问速度

你也可以用其它的音效来替换掉目前的