html触发音频文件,html5实现触发式音频播放器

特效描述：html5实现 触发式 音频播放器。html5实现触发式音频播放器

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Play Audio on :hover

We're going to use HTML5 here, no Flash. We'll need an audio

element with both MP3 (WebKit, IE) and OGG (Firefox, Opera).

<audio controls preload="auto">

<source src="audio/beep.mp3" controls></source>

<source src="audio/beep.ogg" controls></source>

Your browser isn't invited for super fun audio time.

</audio>

We're using jQuery in this demo to make selecting things and events

easier, but the .play() function is native. You probably wouldn't show

the audio element, that's for demo purposes only, just remove

the control attribute to not show anything.

One <audio> for all menu items

.play() won't force the audio clip to start over unless it's finished

first, not very smooth.

• Home

  Your browser isn't invited for super fun time.

• About
• Clients
• Contact Us

$("#nav-one a")

.mouseenter(function() {

beepOne.play();

});

One <audio> for all menu items, with pause

.pause() ing first should stop it and then play new sound but it

actually makes it worse somehow. Sounds get chopped off but not

restarted.

• Home

  Your browser isn't invited for super fun time.

• About
• Clients
• Contact Us

$("#nav-three a")

.mouseenter(function() {

beepThree.pause();

beepThree.play();

});

Cloned <audio>, one for each menu item

Smoothest but not perfect.

• Home

  Your browser isn't invited for super fun time.

• About
• Clients
• Contact Us

.each(function(i) {

if (i != 0) {

$("#beep-two")

.clone()

.attr("id", "beep-two" + i)

.appendTo($(this).parent());

}

$(this).data("beeper", i);

})

.mouseenter(function() {

$("#beep-two" + $(this).data("beeper"))[0].play();

});

$("#beep-two").attr("id", "beep-two0");