Javascript 无法将照片或图像链接到CodePen

我正在尝试使用drop box共享链接将图像和声音文件链接到我的

<div class="container">
    <div class="row second-line">                  
        <div class="col-12">
            <div data-key="32" class="key">
                <kbd>BAR</kbd>
                <span class="sound">808</span>
            </div>
        </div>           
    </div>
</div>


<audio data-key="32" src="https://www.dropbox.com/s/qqusqet38wnfexr/8081.wav?dl=0"></audio>

酒吧
808

css文件中的背景图像或键盘事件的声音文件都不起作用。这在带有本地声音/img的本地文件上非常有效

但是，我尝试使用dropbox上传它们，因为您无法将文件直接上传到CodePen

---

这是否不受支持？我可以发誓我以前见过这样做，或者我做了一些错误和无知的事情。

您可以使用图像的准确url，这样它就可以正常工作

https://photos-2.dropbox.com/t/2/AACwpnCZJSbovN9dSgYlI99tOkrG8qmOjDZQDmRE03cK9g/12/644080844/jpeg/32x32/3/1485946800/0/2/concert.jpg/EO2mxJ0FGA4gBygH/Q3aEGidy4B1EqGjlfgLcFxUvOVFcbpl2vDpixRv4ch8%2CznWx3nvuARPFZAfPD5avW9mleflEhRqDt5xXxIga2K8?dl=0&size=1280x960&size_mode=3

上面的url是您可以在css中替换的确切图像url

background:  url('https://photos-2.dropbox.com/t/2/AACwpnCZJSbovN9dSgYlI99tOkrG8qmOjDZQDmRE03cK9g/12/644080844/jpeg/32x32/3/1485946800/0/2/concert.jpg/EO2mxJ0FGA4gBygH/Q3aEGidy4B1EqGjlfgLcFxUvOVFcbpl2vDpixRv4ch8%2CznWx3nvuARPFZAfPD5avW9mleflEhRqDt5xXxIga2K8?dl=0&size=1280x960&size_mode=3') no-repeat center center fixed;

希望它能帮助你。

看看这个。我正在使用以下代码：

不支持音频元素。

我的后台工作正常，但是声音文件呢？这是最重要的。您可以使用dropbox audio的src

您的浏览器不支持audio元素工作文件！！看看。这不起作用，如果你能链接一个代码笔证明它起作用，那就太好了。另外，我不是在寻找一个声音控制栏。需要声音在键盘上播放一次。太棒了，是的。但无论如何，要移除那个白色的声条？不能那样。如果这个问题得到解决，你肯定是答案！您使用的是哪个浏览器？这会创建不需要的声条，并且键盘事件不起作用。我试图在每次按下空格键时播放键盘事件中的声音。我已更新代码以隐藏播放器并使用空格键触发声音。这很有效，谢谢！必须在今晚之前把它出版。为了便于将来参考，我的问题是我没有包括type=“audio/mpeg”？您在
audio
标记中定义
源代码。
source
标记必须是
audio
元素的子元素。这允许一个
音频
声明具有多种格式（mp3、wav、mpeg等），以便浏览器可以选择最佳的文件播放。我明白了，我还注意到您的音频dropbox链接与我的不同，这也导致了问题。你是如何获得文件本身的链接的？