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

我试图使用下拉框共享链接将图像和声音文件链接到我的Code pen link。无法将照片或图像链接到CodePen

<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>

我的css文件或我的键盘事件的声音文件中的背景图像都没有工作。这适用于本地声音/ img的本地文件。

我想尽量使用Dropbox上传它们，因为你不能直接上传文件到CodePen。

这不支持？我可以发誓我已经看到过这件事，或者我做错了什么和无知。

来源

2017-02-01 YoungCoder

看看这个Codepen。我使用下面的代码：

<audio data-key="32"> 
 
    <source src="https://dl.dropboxusercontent.com/content_link/bHRDoVQqFTHeLSx1YSynP8x5KaNfBIWyWzPG4zOvb9gBEyGBwNKImdcgmVZutije/file?dl=0&duc_id=dropbox_duc_id" type="audio/mpeg">Audio element not supported. 
 
</audio>

来源

2017-02-01 06:23:05

这将创建一个不需要的声吧，并且键盘事件不起作用。我试图在每次按下空格键时从键盘事件播放声音。 – YoungCoder

我已更新我的代码以隐藏播放器并用空格键触发声音。 –

这个作品谢谢你！必须得到今晚发布的这个。就我所知，以供将来参考，是我的问题，我只是没有包含type =“audio/mpeg”？ – YoungCoder

您可以使用图像的确切网址，以便它工作正常。

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;

希望它可以帮助你。

来源

2017-02-01 06:05:13 Ranjith

我有后台工作，但什么声音文件？这是最重要的。 – YoungCoder

可以使用<音频控件> <源SRC = “https://dl.dropboxusercontent.com/content_link/OpMLl2K24D3p2pbz3fTVEfxcEanDm1imIiFLlBmzglfydrS1Sw6mhHCuYMbYaGmp/file?dl=0&duc_id=dropbox_duc_id” 类型= “音频/ MPEG”> 的收存箱音频'SRC您的浏览器不支持音频元素。 '工程文件！查看。 – Ranjith

这是行不通的，如果你可以链接一个codePen，证明它确实很棒。另外，我不在寻找一个声音控制栏。只需要一次在键盘事件上播放声音。 – YoungCoder

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

回答

相关问题