Question

尝试用自定义图像替换onclick按钮。到目前为止我有：

我如何制作这样的图像可以作为背景音乐的播放按钮？

import React from "react";
import { render } from "react-dom";

const App = () => {
  return <div dangerouslySetInnerHTML={{__html: `
  <iframe src="https://www.cricruns.com/widgetbase/wid_300_200_1"; width=250&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=320 " scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:310px; height:250px;" allowTransparency="true"></iframe>
  `}} />;
};

render(<App />, document.getElementById("root"));

<audio id="player" autoplay="autoplay" loop="loop" src="file://C:\Users\Sony\Desktop\folder\cop\music\Rapsody.mp3"></audio>
  <button onclick="document.getElementById('player').play()"> Play </button> 
  <button onclick="document.getElementById('player').pause()">Pause</button>

先谢谢！

Answer 1

如果要将其替换为图像，可以隐藏它并使用按钮单击它。

<audio id="player" style="display:none" autoplay="autoplay" loop="loop" src="file://C:\Users\Sony\Desktop\folder\cop\music\Rapsody.mp3"></audio>

在上面之后，您可以添加图像

<img src="x.png" onclick="$("#player").play();">

没有测试它，但我很确定这是有效的

Answer 2

使用png图标：

 <button onclick="document.getElementById('player').play()"><img src="play.png"></button> 
 <button onclick="document.getElementById('player').pause()"><img src="pause.png"></button>

使用Fontawesome图标库：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   <button onclick="document.getElementById('player').play()"><i class="fa fa-play" style="font-size:2wv;"></i>

   <button onclick="document.getElementById('player').pause()"><i class="fa fa-pause" style="font-size:2wv;"></i>

Bootstrap也有媒体图标。

Replce onclick按钮与图像

2 个答案: