`
superloafer
  • 浏览: 170309 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用Javascript制作声音按钮

阅读更多

  一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现。

  能让按钮发出声音的脚本,这下不用制作Flash按钮也可以了,我试用的感觉还不错。

  制作方法:

  1、新建文件:

以下是引用片段:
DynamicAudioButton.js ,代码:
//Customize Dynamic Audio Link 自定义动态声音链接
function DynamicAudioLink(){
    open("http://www.pcedu.com.cn")
}

//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色
function AudioOver() {
    document.Audio.button.style.background="#999999"
    document.Audio.button.style.color="white"
}

//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色
function AudioDown() {
    document.Audio.button.style.color="#cccccc"
}

//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色
function AudioOut() {
    document.Audio.button.style.background="#666666"
    document.Audio.button.style.color="#ffffff"
}

//Customize Dynamic Audio sound 自定义动态声音
function playHome() 
{
    document.all.sound.src = "bleep.wav";
}

document.write('<bgsound id="sound">')

//Customize Button Style 自定义按钮样式
document.write('<style type="text/css">...'+'<!--')
document.write('.select{...}{background:#666666;border-color:"#999999";color:"#ffffff";font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight: bold;}'+'-->'+'</STYLE>')

document.write('<center><form name=Audio><input class="select" name=button type="button" value="Dynamic Audio" onclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" onMouseDown="AudioDown()" onMouseOut="AudioOut()"></form></center>')


  2、保存文件后,在页面相关处插入代码引用该JS文件:

以下是引用片段:
<Script language="JavaScript" SRC="DynamicAudioButton.js"></script>


  3、选择好音乐文件,可以是wav、MP3等,音乐文件尽量小些。

  方法制作完成,用户可以使用图片等形式,当然也得修改 DynamicAudioButton.js 文件相应的代码。
该方法好像只有用IE浏览器才有效!
分享到:
评论

相关推荐

    水晶按钮制作flash

    例如,当用户点击按钮时,可以播放声音、跳转到新的网页或者执行其他JavaScript函数。 标签“适合flash”表明这个资料适合已经有一定Flash基础的设计师,他们可以通过学习进一步提升自己的Flash技能。而“网页制作...

    带声音的flash按钮特效 源文件.rar

    总结来说,这个"带声音的flash按钮特效 源文件"提供了使用Flash和ActionScript创建动态交互式按钮的方法,包括加载和播放音频文件,以及响应用户鼠标事件。虽然现代Web开发中Flash已不再主流,但理解这种交互设计和...

    使用javascript设计抽奖转盘

    通过这个过程,我们可以学习到JavaScript的基本语法、DOM操作、事件处理、动画制作以及一些面向对象编程的概念。同时,这个项目也提供了一个实际应用场景,帮助开发者提升问题解决能力和实践能力。在实际开发中,还...

    基于JavaScript、css在页面制作一个电风扇

    例如,我们可以添加一个按钮元素,然后使用JavaScript的`addEventListener`方法来监听按钮的点击事件。 ```javascript const fanButton = document.getElementById('fan-button'); fanButton.addEventListener('...

    使用 JavaScript 编写的音乐播放器及其源代码.zip

    用户可以单击前进和后退播放按钮来更改歌曲。  项目制作 该项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能,用户可以像音乐播放器一样聆听 音乐并放松身心,尽情享受自己喜欢的音乐声音。该项目包含大量 ...

    使用 JavaScript 编写的音乐播放器应用程序(带源代码).zip

    项目:使用 JavaScript 编写的简单音频播放器 应用程序(含源代码) 简单的音频播放器应用程序是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目是一个有趣的项目,用于收听我们自制的歌曲收藏 应用...

    HTML+Javascript实现点击图片自动播放背景音乐

    HTML用于创建网页的基本结构,包括图像元素(`&lt;img&gt;`)和可能的按钮或链接元素。在描述中提到的案例中,图片被用作触发音乐播放的媒介。HTML代码可能会这样编写: ```html ()"&gt; ``` 这里的`id`属性(`musicTrigger...

    javascript大作业网页简化版超级马里奥游戏源码

    总的来说,这个“javascript大作业网页简化版超级马里奥游戏”项目,不仅展示了JavaScript在游戏开发中的应用,还涵盖了HTML、CSS以及JavaScript的基础知识,如DOM操作、事件处理、动画制作、逻辑控制等。...

    HTML5七夕情人节表白网页制作【自定义文字-烟花告白】HTML+CSS+JavaScript浪漫烟花表白网页制作

    - **个性化表达**:此表白网页利用HTML、CSS与JavaScript技术,结合七夕这一传统节日背景,旨在帮助那些想要表达爱意却羞于开口的人们,通过制作个性化的表白网页来传达情感。 - **互动体验**:通过动态效果(如烟花...

    BeatMaker:BeatMaker使用JavaScript,CSS和HTML。 循环播放声音片段,更改速度,工作静音按钮以及多个音轨选项

    BeatMaker可能使用了`&lt;audio&gt;`标签配合JavaScript事件监听来实现音频的播放和控制。 在多个音轨选项上,BeatMaker可能采用了数组或对象来存储和管理不同的音轨。用户可以选择添加、删除或切换音轨,而JavaScript会...

    Flash按钮素材,可用于Flash菜单.rar

    使用Flash制作的菜单按钮不仅能够提供动态的视觉体验,还能通过交互反馈来帮助用户更好地理解他们所在的位置和可选择的操作。例如,当用户将鼠标悬停在某个按钮上时,按钮可能会改变颜色、放大或者播放一个简短的...

    HTML5+CSS3实现的音量调节旋转按钮动态特效源码

    在这个案例中,开发者可能使用了`&lt;input type="range"&gt;`来创建基本的音量控制,并通过JavaScript进行进一步的增强,使得用户可以通过点击和拖动按钮来调整音量。 CSS3则为网页样式和布局提供了更多可能性。在音量...

    javascript钓鱼游戏源码

    4. **媒体资源**:`media` 文件夹中可能包含游戏的声音效果、图片资源等,这些资源与JavaScript结合,可以增强游戏的互动性和沉浸感。例如,`下载.png` 和 `icon.png` 可能分别代表游戏的下载按钮和图标。 5. **...

    Drum-Kit:使用HTML,CSS和Javascript制作的交互式网站

    【标题】"Drum-Kit:使用HTML,CSS和Javascript制作的交互式网站"揭示了如何利用前端技术构建一个互动的在线架子鼓模拟应用。这个项目主要涉及的是网页开发的基本技术,包括HTML(超文本标记语言)用于创建网页结构,...

    flash按钮.rar

    在实际应用中,Flash按钮可以配合HTML和JavaScript在网页中使用,通过ActionScript(Flash的内置脚本语言)实现与用户的交互,如跳转链接、播放音频或视频、控制动画等。尽管现代网页设计趋势已转向更轻量级的HTML5...

    Meditation:使用HTML,CSS,Javascript制作的冥想网站

    标题中的"Meditation:使用HTML,CSS,Javascript制作的冥想网站"表明这是一个基于Web技术构建的冥想应用。这个应用旨在帮助用户在繁忙的工作之后放松心情,通过聆听大自然的声音和专注呼吸来达到冥想的效果。它利用...

    使用JS制作的windows7侧边栏万年历

    《使用JS制作的Windows7侧边栏万年历:打造个性化日历体验》 Windows7操作系统中的侧边栏小工具一直以来都是用户个性化桌面的重要组成部分,其中万年历小工具更是深受用户喜爱。本文将深入探讨如何利用JavaScript...

    DespertadorJS:用Javascript制作的闹钟

    《使用JavaScript制作闹钟:DespertadorJS详解》 在当今的Web开发中,JavaScript作为浏览器端的主要脚本语言,其应用已经远远超出了页面交互的范畴。其中一个有趣的实例就是用JavaScript来创建一个功能完善的闹钟,...

    基于JavaScript的手机UI设计.doc

    通过JavaScript,设计师可以创建动态按钮、滑动面板、动画过渡等视觉元素,提高用户与应用的互动性。同时,JavaScript还可以实现响应式设计,确保UI在不同设备和屏幕尺寸上都能良好运行。 第 2 章 手机UI的发展趋势...

    幸运大转盘

    在JavaScript中,我们可以使用`addEventListener`来监听用户的点击行为,当用户触发事件时,调用一个函数来旋转转盘。旋转效果通常通过改变元素的样式属性,如`transform: rotate()`,并配合`requestAnimationFrame`...

Global site tag (gtag.js) - Google Analytics