Hướng dẫn click image to play audio html - nhấp vào hình ảnh để phát html âm thanh

Câu hỏi thú vị.

Rõ ràng, bạn nên đi cho một giải pháp JavaScript (như bài đăng này). Để trích dẫn CSS-Tricks.com:go for a JavaScript solution (like this post). To quote css-tricks.com:

Thật không may, chúng ta không thể nói một yếu tố phải làm gì thông qua CSS, vì vậy chúng ta sẽ cần JavaScript.

Tuy nhiên, bạn đã thiết lập một thử thách khá tốt.

Phần tử có khả năng hiển thị các điều khiển. Trong hầu hết các trình duyệt, nút phát sẽ đến từ đầu trái trong các điều khiển. Do đó, nếu bạn bọc phần tử thích hợp bên trong phần tử chữ cái của bạn (________ 5/ ________ 6/ v.v.), thì, với một phép thuật định vị tuyệt đối và thấp ____ cho , bạn có thể đặt chữ cái của mình "trên âm thanh". Vì vậy, khi người dùng nhấp vào chữ cái, họ thực sự nhấp vào nút phát.

Nếu bạn sử dụng các điều khiển mặc định của trình duyệt, thì bạn phụ thuộc vào trình duyệt, vì các kích thước điều khiển sẽ khác nhau giữa các trình duyệt. Tuy nhiên, bạn có thể tạo các điều khiển tùy chỉnh hoặc sử dụng người chơi có sẵn trên thị trường (như JPlayer), để có kích thước không đổi để phù hợp với các chữ cái của bạn.

Ví dụ và bản demo:

Mã sau đây sẽ nhấp vào chữ H phát âm thanh của một con ngựa, miễn là bạn kiểm tra nó trong trình duyệt Chrome.

CSS:

div#lH {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  z-index: 1;
  font-size: 25px;
  text-align:center;
}
audio#aH {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 0.01;
}

HTML:

  
H

Đây là một jsfiddle.

Thêm các yếu tố trang web với âm thanh khi nhấp vào nhấp chuột

Trình duyệt chéo HTML5 Sound cho các sự kiện "onclick" có thể được sử dụng trên văn bản, hình ảnh hoặc phần div trên trang web HTML. Hoạt động trong tất cả các trình duyệt web và cả trong các phiên bản IE (7 & 8) cũ hơn bằng cách sử dụng mã HTML "BGSound" dự phòng. Xem ghi chú ở cuối trang này.

Nhấp vào các ví dụ âm thanh: Những ví dụ này bao gồm âm thanh cho một nhấp chuột, nhấp vào hình ảnh hoặc nhấp vào khu vực. Bạn sẽ nghe một cú nhấp chuột ngắn khi bạn nhấp vào bất kỳ yếu tố nào trong 3 yếu tố này. [Xem ví dụ]
These examples include sound for a text click, image click or div area click. You should hear a short click when you click on any of these 3 elements. [ view example ]

Nhấp vào cho âm thanh

Nhấp vào cho âm thanh

Thêm nhấp vào âm thanh vào trang web của bạn: Sử dụng thẻ HTML5 "Âm thanh" HTML5. Thực hiện theo các bước bên dưới để thêm âm thanh vào bất kỳ trang web HTML nào.
Uses the HTML5 "audio" tag. Follow the steps below to add sound to any HTML webpage.

Bước 1: Tải xuống các tệp âm thanh nhấp chuột

Bước 2: Từ tệp zip đã tải xuống, sao chép "Sound-onclick.js" và 2 tệp âm thanh, .mp3 và .Ogg vào thư mục trang web chính của bạn. Đặt "Âm thanh-hình ảnh.jpg" trong thư mục Pics của bạn.From the downloaded zip file, copy the "sound-onclick.js" and 2 sound files, .mp3, and .ogg into your main website folder. Place the "sound-image.jpg" in your picts folder.

Ghi chú: The .Ogg dành cho Firefox và Opera. MP3 được sử dụng cho IE, Safari và Chrome. Bạn có thể tùy chọn sử dụng WAV bằng cách chỉnh sửa mã theo bước #4 thành .wav và chỉnh sửa "Sound-onclick.js" để sử dụng WAV. The .ogg is for Firefox and Opera. The mp3 is used for IE, Safari and Chrome. You can optionally use a wav by editing the code in step #4 to .wav and edit the "sound-onclick.js" to use a wav.

Ghi chú: Mã BGSound được sử dụng cho các phiên bản IE trước IE9. The bgsound code is used for IE versions before IE9.

Bước 3: Chọn, sao chép và dán mã sau vào trang HTML của bạn. Mã này đi vào phần trên cùng của trang HTML của bạn.Select, copy and paste the following code to your HTML page. This code goes in the top section of your HTML page.

Bước 4: Chọn, sao chép và dán mã sau vào trang HTML của bạn. Mã này đi gần cuối trang. Đặt nó sau khi nhấp vào văn bản, hình ảnh hoặc div của bạn. Select, copy and paste the following code to your HTML page. This code goes near the bottom of the page. Place it after your click text, image or div.

Bước 5: Chọn, Sao chép và Dán mã sau để thêm Văn bản Nhấp vào Âm thanh, Hình ảnh hoặc Mã DIV của bạn. Select, copy and paste the following code to add your sound click text, image or div code.

Mã cho văn bản nhấp vào âm thanh:

Nhấp vào cho âm thanh

Mã cho một hình ảnh Nhấp vào âm thanh:

Mã cho một khu vực âm thanh div:

Nhấp vào cho âm thanh

Mã cho một hình ảnh Nhấp vào âm thanh:Test your page in some different browsers like IE, Chrome, Firefox and Safari if possible.

Converting audio files:
We use Sound Forge software to convert our samples to ogg, however, if you search at Google many other free mp3 to ogg converters are available like Audacity and the OGG Video Converter (if you do some Google searches you may find a free download of Sony Sound Forge).

Mã cho một khu vực âm thanh div:

• Bước 6 Kiểm tra: Kiểm tra trang của bạn trong một số trình duyệt khác nhau như IE, Chrome, Firefox và Safari nếu có thể.
• Chuyển đổi các tệp âm thanh: Tuy nhiên, chúng tôi sử dụng phần mềm Forge Forge để chuyển đổi các mẫu của chúng tôi thành OGG, nếu bạn tìm kiếm tại Google, nhiều bộ chuyển đổi MP3 sang OGG miễn phí khác có sẵn như Audacity và OGG Video Converter (nếu bạn thực hiện một số tìm kiếm Google, bạn có thể tìm thấy một Tải xuống miễn phí của Sony Sound Forge).
• Ghi chú và Mẹo:
• Mã được sử dụng là HTML5 với dự phòng "BGSound".
• Nếu bạn sử dụng các tệp âm thanh dài, hãy sử dụng tệp MP3 được lưu ở chất lượng thấp hơn.

Âm thanh có thể không hoạt động trong tất cả các trình duyệt hoặc có thể tải chậm hơn trong một số trình duyệt.
This is involved and only for advanced users. You will be changing the script to play sounds by ID rather than by using the audio tag.

• Âm thanh có thể không hoạt động trong Safari trừ khi bạn đã cài đặt QuickTime.

• Mã cho một khu vực âm thanh div:

  Bước 6 Kiểm tra: Kiểm tra trang của bạn trong một số trình duyệt khác nhau như IE, Chrome, Firefox và Safari nếu có thể.

  Chuyển đổi các tệp âm thanh: Tuy nhiên, chúng tôi sử dụng phần mềm Forge Forge để chuyển đổi các mẫu của chúng tôi thành OGG, nếu bạn tìm kiếm tại Google, nhiều bộ chuyển đổi MP3 sang OGG miễn phí khác có sẵn như Audacity và OGG Video Converter (nếu bạn thực hiện một số tìm kiếm Google, bạn có thể tìm thấy một Tải xuống miễn phí của Sony Sound Forge).

  Ghi chú và Mẹo:

  Mã được sử dụng là HTML5 với dự phòng "BGSound".

• Nếu bạn sử dụng các tệp âm thanh dài, hãy sử dụng tệp MP3 được lưu ở chất lượng thấp hơn.
• Âm thanh có thể không hoạt động trong tất cả các trình duyệt hoặc có thể tải chậm hơn trong một số trình duyệt.
• Âm thanh có thể không hoạt động trong Safari trừ khi bạn đã cài đặt QuickTime.
• Chỉ có thể sử dụng 1 tệp âm thanh trên mỗi trang trừ khi bạn sửa đổi tập lệnh như được nêu dưới đây.
• Đối với các liên kết trong bước #5, mỗi người cần được chỉnh sửa với tên chức năng mới của bạn. playclip (); ví dụ playclip1 () ;.
• Chỉnh sửa các tệp âm thanh để sử dụng trong mã bạn thêm vào trang HTML và .mp3 để sử dụng trong mỗi chức năng bạn đã thêm.
• Lưu ý: Tuy nhiên, bạn đang thay đổi cách âm thanh HTML5 phát, tuy nhiên, mã BGSound về cơ bản vẫn giống nhau.
• Hãy chắc chắn kiểm tra trong IE và ít nhất một trình duyệt web khác.

Làm thế nào tôi có thể thêm âm thanh vào một hình ảnh trong HTML?

HTML5 cung cấp một cách nhanh chóng và dễ dàng để thêm các tệp âm thanh vào một trang web bằng cách của phần tử.Như với phần tử, phần tử chấp nhận URL nguồn được chỉ định bởi thuộc tính SRC.Tuy nhiên, không giống như phần tử, phần tử yêu cầu cả thẻ mở và đóng, chúng ta sẽ sớm thảo luận.by way of the . As with the element, the

Làm thế nào để bạn tạo một tệp âm thanh phát trong HTML?

Tôi có thể phát âm thanh trong HTML không?

Làm thế nào để bạn liên kết âm thanh trong HTML?