HTML-CSS-JSでtouch on touchイベントを再生する

-1

HTML-CSS-JavaScriptを使用してタッチスクリーン上の画像に触れることで、MP3オーディオファイルを再生する方法を見つけるのを助けてくれますか？HTML-CSS-JSでtouch on touchイベントを再生する

ありがとうございました！

2017-03-07 Gigi

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <title>audio with image</title> 
    </head> 
    <body> 

    <script> 
    function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
       } 
    </script> 

<img src="http://www.partyplan123.com/wp-content/uploads/2015/02/click-here.jpg" onclick="play()"> 
<audio id="audio" src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" ></audio> 
</body> 
</html>

出典

2017-03-07 13:51:32

ありがとう、それは私が探していたものです。なぜ私が使用していたコードがわからないのですが、画像の中央に配置すると、画像の両側をクリックしてもオーディオが再生されます。ありがとうございました！反対側では、これはクロムでのみ動作し、エクスプローラでは動作しません – Gigi

IEで開発者コンソールを開いてJavaScriptのエラーを確認しましたか？キーボードでF12を押してから、コンソールタブに切り替えて開くことができます。 –

HTMLでオーディオファイルを再生するには、<audio></audio>タグを使用します。
このタグには<audio controls>という属性も付いており、再生の一時停止やすべてのコントロールを追加できます。
このタグの詳細については、W3 audio tag docs
JS側については、タッチ時にオーディオファイルをトリガーするためにonclick()イベントを使用してください。

出典

2017-03-07 13:26:17 Araphel

htmlでオーディオ要素を作成し、visibility: hiddenを使用して非表示にします。

ユーザーが画像をクリックすると、Javascriptでclickイベントを処理し、ハンドラからオーディオ要素を手動でトリガーします。

here for more documentationは、audioのhtml apiに記載されています。

出典

2017-03-07 13:45:15

HTML-CSS-JSでtouch on touchイベントを再生する

答えて

関連する問題