请问有什么方法可以直接点击页面上某个元素，播放它的资源？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4974 天前的主题，其中的信息可能已经有所发展或是发生改变。

假设一个情景：
页面上，demo，跟demo绑定的资源是一个demo.mp3格式的资源，我想点击demo之后在当前页面自动播放demo.mp3而不会跳转到新的页面，或者是在新的页面代替当前页面。

就关于这个技巧，是否可以1-2句话帮我解释一下？
如果1-2句话解释不清，那是否可以告知我应该看些什么东西，从那儿入手? 谢谢

Demo

页面

mp3

15 条回复 • 1970-01-01 08:00:00 +08:00

paloalto

2012 年 5 月 29 日

没太明白是怎么回事。lZ是说要在demo页面里面嵌套一个mp3播放器吗？点击播放器上的播放按钮就自动播放mp3文件？

VeryCB

2012 年 5 月 29 日

html5 multimedia

yujnln

2012 年 5 月 29 日

@paloalto
不嵌套mp3播放器，直接点击这个demo字符串就能播放，有点像超链接的感觉
<a href="http://www.v2ex.com/demo.mp3">demo</a>
但是像上面的做法会把当前页面代替成http://www.v2ex.com/demo.mp3这个页面。貌似现在浏览器应该都支持直接输入MP3链接自动播放吧(至少我用chrome是这样)

reus

2012 年 5 月 29 日

用js

VeryCB

2012 年 5 月 29 日

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
</audio>

可参考http://www.w3schools.com/html5/html5_audio.asp

yujnln

2012 年 5 月 29 日

@VeryCB
感谢，不过我的意思是不需要出现播放器，直接用户点击一下，在当前页面把声音播放出来就完了。
这个是不是就要用到 @reus 说的js?

maikcn

2012 年 5 月 29 日

页面隐藏一个绑定该资源的播放器
a link通过javascript调用播放器的播放功能

VeryCB

2012 年 5 月 29 日

@yujnln 嗯…可以把播放器先隐藏，比如给它加一个hidden的class，用CSS把display设为none，然后用js给a绑定一个click事件，点击时remove这个class使其显示

farley

2012 年 5 月 29 日

yahoo webplayer:http://webplayer.yahoo.com/get/#_

zern

2012 年 5 月 29 日

js 插入 flash

yujnln

2012 年 5 月 29 日

@VeryCB
谢谢，我先按照你说的尝试一下~

Keinez

2012 年 5 月 29 日

@VeryCB 看到display隐藏，其实可以用CSS隐藏播放器的……具体语句如下：

position: absolute; opacity: 0; filter:Alpha(opacity=0);
作用是使其浮在页面上并使之透明。

mkeith

2012 年 5 月 29 日

楼主的意思是可控制的背景音乐是吧?

yujnln

2012 年 5 月 29 日

谢谢 @all 简单地实现了一下

<span onclick="Play('http://f3.xiami.net/56606/376160/01%201769459428_1325529.mp3')">レイン</span>
<span onclick="Play('http://f3.xiami.net/57295/363096/01%201769312351_1004828.mp3')">英雄</span>

<audio id='sound' hidden="hidden" autoplay='autoplay'> </audio>
<script>
function Play(url)
{
document.getElementById('sound').src = url;
}
</script>

yujnln

2012 年 5 月 29 日

@mkeith
其实我的需求是收集一份words list，然后可以让我单击这个word迅速发音，这样可以最快地把拼写和发音结合起来，不需要例句，音标，中文解释等等。就一张页面，包含自己所学过的所有单词。
而这点，我至今没有发现那家网站有，所以我自己想简单地实现一下用用。
拓词其实已经很接近了，但每次单击一个单词还是会有弹窗，然后再关闭。单词的顺序也是被固定的